Vue项目前端开发环境请求服务器接口跨域问题

Vue3 前端配置服务器代理在vue.config.js中设置服务器代理，代码如下：

       devServer: {

              port: 8080,            // 端口号

              host: ‘0.0.0.0’,

              https:false,

              open: true,            // 配置自动启动

              proxy: {

                     ‘/metadata’: {

                            target: ‘http://172.18.16.157:7086’,

                            ws: true,

                            changeOrigin: true,

                            pathRewrite: {

                                   ‘^/metadata’: ‘/’

}

},

‘/system’: {

       target: ‘http://172.18.16.157:7081’,

       ws: true,

       changeOrigin: true,

       pathRewrite: {

              ‘^/system’: ‘/’

}

},

‘/’: {

       target: ‘http://172.18.16.172:7082/api’,

       ws: true,

       changeOrigin: true,

       pathRewrite: {

              ‘^/’: ‘/’

}

},

}

}

target 对应的属性值为你准备向后端服务器发送请求的主机+端口，含义为：相当于把前端发送请求的主机+端口自动替换成挂载的主机和端口，这样前后端的主机端口都——就不会存在跨域问题；

ws：表示 WebSocket 协议；

changeOrigin: true; 表示是否改变原域名；这个一定要选择为 true；

这样发送请求的时候就不会出现跨域问题了。