vue打包後，接口請求404的完美解決方案

在開發環境中，和後臺對接爲了解決跨域問題，使用了代理，也就是vue的proxyTable，可是打包放到生產環境中去時，接口請求不到，404，緣由是開發環境的代理並不能用到生產環境，可是直接在請求接口是使用服務器地址，能夠成功，可是會形成cookie丟失而失去權限驗證

我腦海裏出現有兩種辦法，一是使用代理，如何解決接口路徑請求404的問題，二是直接寫請求路徑，如何解決cookie丟失的問題

以前由於cookie丟失，後臺忙活了很長時間，好不容易纔解決的，加之開發環境下並不會丟失，因此個人想法是繼續使用代理

在網上找了不少辦法，有很多人遇到這個問題，可是基本都沒有詳細的解決方案，好不容易纔找到說能夠試試用nginx反向代理的方式，OK，開幹

首先，前端仍是先不改動，接口路徑依然是'/api/...'：

登陸服務器，找到nginx的安裝目錄下：cd /etc/nginx

打開配置文件 vi nginx.conf

按  i  修改，新增

location /api { proxy_set_header Host $host; proxy_set_header x-forwarded-for $remote_addr; proxy_set_header X-Real-IP $remote_addr; proxy_pass http://127.0.0.1:8080; // 接口地址，若是在同一個服務器上，能夠直接這樣寫
        }

保存退出，先esc，而後保存   :wq!

nginx支持熱啓動，因此直接重啓命令    service nginx reload

OK了，nginx反向代理生效了，如今能夠繼續用代理，接口請求成功，也不會丟失cookie，喜大普奔！

 

最後整理一下Linux模式下退出編輯模式的操做：

編輯結束，按ESC 鍵 跳到命令模式，而後輸入退出命令：

:w 保存文件但不退出vi 編輯

:w! 強制保存，不退出vi 編輯

:w file 將修改另存到file中，不退出vi 編輯

:wq 保存文件並退出vi 編輯

:wq! 強制保存文件並退出vi 編輯

q: 不保存文件並退出vi 編輯

:q! 不保存文件並強制退出vi 編輯

:e! 放棄全部修改，從上次保存文件開始在編輯

 

但願本文對你有所幫助！