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

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

在开发环境配置好本地代理后，使用Nginx反向代理解决生产环境跨域问题，Nginx反向代理配置很是简单，大概三步就能实现；

1、下载 Nginx

　　下载地址：http://nginx.org/en/download.html

　　打开如图所示：

　　

　　通常第一个是最新版，第二个是稳定版，点击最新版或者稳定版下载均可以；

2、修改配置文件

　　下载好nginx后就能够开始设置nginx的配置文件了，步骤以下图：

　　

　　新添加的代码：

        location /api {
            rewrite  ^.+api/?(.*)$ /$1 break;
               include  uwsgi_params;
            proxy_pass   https://www.xxxxx.cn:444;#此处修改成本身的请求地址
        }

 

3、把dist里的前端资源放到html文件夹

　　接着把打包好的vue文件复制过来，放到html文件夹就能够了，结构以下图：

　　

4、启动 Nginx

　　最后就是启动nginx，浏览器打开localhost(可在nginx配置修改)，来看看效果吧：

　　

　　接口数据获取成功，使用nginx反向代理解决vue生产环境跨域问题圆满解决；；