Vue Nginx反向代理配置 解決生產環境跨域

Vue 本地代理編輯好后，能實現跨域獲取接口數據，但是打包后在生產環境接口報錯404，要怎樣才能解決生產環境跨域問題呢？

在開發環境配置好本地代理后，使用Nginx反向代理解決生產環境跨域問題，Nginx反向代理配置非常簡單，大概三步就能實現；

一、下載 Nginx

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

　　打開如圖所示：

　　

　　一般第一個是最新版，第二個是穩定版，點擊最新版或者穩定版下載都可以；

二、修改配置文件

　　下載好nginx后就可以開始設置nginx的配置文件了，步驟如下圖：

　　

　　新添加的代碼：

        location /api {
            rewrite  ^.+api/?(.*)$ /$1 break;
               include  uwsgi_params;
            proxy_pass   https://www.xxxxx.cn:444;#此處修改為自己的請求地址
        }

 

三、把dist里的前端資源放到html文件夾

　　接着把打包好的vue文件復制過來，放到html文件夾就可以了，結構如下圖：

　　

四、啟動 Nginx

　　最后就是啟動nginx，瀏覽器打開localhost(可在nginx配置修改)，來看看效果吧：

　　

　　接口數據獲取成功，使用nginx反向代理解決vue生產環境跨域問題圓滿解決；；