Vue 项目如何配置代理解决跨域

是什么是跨域？

由于浏览器的同源策略（SOP: same origin policy）的存在，只有协议、域名和端口三者都相同的情况下，相互之间才可以进行交互，任何一个不同，哪怕是同一域名下不同端口，也无法正常交互，这便是跨域；

解决跨域的方法有哪些？

常见的解决跨域的方案有JSONP（jsonp的原理是动态插入script标签），node.js中间件解决跨域，nginx代理跨域，WebSocket协议跨域等

（详情参考：https://segmentfault.com/a/1190000011145364?utm_source=tag-newest）

 

在Vue 3.0项目中，可以通过如下配置解决跨域：

在根目录下新建一个  vue.config.js 文件  （ps:  2.0版本下有该文件，直接修改，3.0版本需要新建该文件）

module.exports = {
    //相当于webpack-dev-server,  对本地服务器进行配置
    devSever : {
         proxy:  {
            "/api" : {
                 target: " http://localhost:3000 ",   //需要跨域的目标url ,我这里是自己本地起的一个服务端口
                 changeOrigin: true,           // 将基于名称的虚拟托管网站的选项，如果不配置，请求会报404
                 ws:  true,
                 pathRewrite: {
                     " ^/api " :  ""          //若请求的路径在目标url下但不在/api 下，则将其转换成空
                 }     
            }
        }
    }      
}