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

 

Vue本地代理举例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

module.exports = {   publicPath: './',   devServer: {     proxy: {       '/api': {         target: 'https://movie.douban.com',         ws: true,         changeOrigin: true,         pathRewrite: {           '^/api': ''         }       },       '/bpi': {         target: 'https://cdnopenapialifc.agaege.com/',         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

1 2 3 4 5 6 7

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

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

 

举例：

1 2 3 4 5 6 7 8 9 10 11

location /api { rewrite ^.+api/?(.*)$ /$1 break; include uwsgi_params; proxy_pass https://movie.douban.com; }   location /bpi { rewrite ^.+bpi/?(.*)$ /$1 break; include uwsgi_params; proxy_pass https://cdnopenapialifc.agaege.com/; }