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;

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

Logo

一站式 AI 云服务平台

更多推荐