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/;
}
posted @ 2020-10-14 15:16  举个栗子走天下  阅读(471)  评论(0)    收藏  举报