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生產環境跨域問題圓滿解決；；