Vue Nginx反向代理配置 解决生产环境跨域

Vue本地代理举例：

module.exports = {publicPath: './',devServer: {proxy: {'/api': {target: '',ws: true,changeOrigin: true,pathRewrite: {'^/api': ''}},'/bpi': {target: '/',ws: true,changeOrigin: true,pathRewrite: {'^/bpi': ''}}}},pwa: {iconPaths: {favicon32: 'favicon.ico',favicon16: 'favicon.ico',appleTouchIcon: 'favicon.ico',maskIcon: 'favicon.ico',msTileImage: 'favicon.ico'}}}

Vue 本地代理编辑好后，能实现跨域获取接口数据，但是打包后在生产环境接口报错404，要怎样才能解决生产环境跨域问题呢？

在开发环境配置好本地代理后，使用Nginx反向代理解决生产环境跨域问题！

1、修改Nginx的配置文件 xxx.conf

location /api {rewrite ^.+api/?(.*)$ /$1 break; //可选参数，正则验证地址include uwsgi_params; //可选参数，uwsgi是服务器和服务端应用程序的通信协议，规定了怎么把请求转发给应用程序和返回proxy_pass :444; #此处修改为自己的请求地址，必填}###api为本地开发时，在config/index.js中的proxyTable: {}配置的请求代理###根据具体情况修改

2、记得重启Nginx服务，使修改生效

举例：

location /api {rewrite ^.+api/?(.*)$ /$1 break;include uwsgi_params;proxy_pass ;}location /bpi {rewrite ^.+bpi/?(.*)$ /$1 break;include uwsgi_params;proxy_pass /;}