在根目录下 创建名为vue.config.js的文件,然后在其中书写代码。 之后请求数据需要地址的时候,用代理会比书写全部地址简洁一些。 module.exports={ devServer:{ //配置代理有两个好处. // 1.节约带代码量,方便后期维护 // 2.可以解决跨域问题 //了解一下什么是跨域? // 在了解跨域之前先了解一下 浏览器的同源安全策略; // 服务分为协议,主机,端口号. //我们现在启动的项目是通过内存启动的. 自动生成localhost服务. 服务 主机 端口号与后端服务不一致. 所以会触发同源策略 就是所谓的跨域问题. //那么问题来了? 为什么会有同源策略 // 1.为了防止恶意网页可以获取其他网站的本地数据。 // 2.为了防止恶意网站iframe其他网站的时候,获取数据。 // 3.为了防止恶意网站在自已网站有访问其他网站的权利,以免通过cookie免登,拿到数据。 // 那么引入今天的正题,为什么之前没有配置代理,也能请求到接口呢? // 解决跨域问题有很多种方式,在以后工作中,大部分跨域问题都有后端开发来解决,他们做一个注解就能解决跨域问题. // 那么后端帮助咱们解决了跨域问题,那咱们还用代理吗? 当然是要用的. open:true, port:3000, hot:true, proxy:{ //当以api开头的请求会进行代理。 '/api':{ target:"http://www.baidu.com", //你需要的代理的地址. changeOrigin:true, //是否允许跨域? true为允许. pathRewrite:{ '^/api':""//路径重写 请求时将api,不需要路径重写时可以把最后三行注释掉 } } } } }
如何在一个项目里设置代理
最新推荐文章于 2024-01-15 16:11:06 发布