最近在接觸前后端分離的Springboot+vue框架。相較於之前用的ASP .NET MVC框架，Springboot+vue將前后端分離得更加徹底，並且將前后端分別置於不同的服務器：Nginx和Tomcat中。
因此，用ASP .NET MVC的思想讓前端訪問后端接口時就會出現一些小問題。本文記錄如何設置反向代理，讓vue訪問同一IP地址內的后端接口。
-- By Brisk
不同於ASP .NET MVC直接localhost一擼到底，如果在vue中的axios中設置請求接口為localhost，如下：
axios.defaults.baseURL = 'http://localhost:8081'
則在本地開發時是沒有問題的，但是在發布到雲端后會報錯，如下所示：
這是因為此時這個POST請求是由瀏覽器直接向localhost這個地址，通俗講就是瀏覽這個頁面的電腦發出的，在這里自然是找不到8081上的接口，因為接口發布在雲端嘛。
解決辦法有3種，最后一種是目前采用的解決辦法。
1）直接在axios中寫后端接口的具體地址
如下：
axios.defaults.baseURL = '接口具體IP地址+端口'
如
axios.defaults.baseURL = 'http://1.2.3.4:8081'
這樣便可以訪問后端的接口地址。但是這樣會將后端的接口地址直接暴露在瀏覽器中，且雲服務器需要開放8081，雖然可以解決問題，但是不是很優美。
2）在vue程序中設置反向代理。
在vue工程的index.js中找到ProxyTable，設置反向代理的相關內容。可參考網上資料。這時axios的默認baseURL就可以寫成：
axios.defaults.baseURL = '/api'
在瀏覽器中調用POST接口訪問后端接口時，接口地址就變成：“vue前端服務器地址/api/”，這樣后端接口的地址就不會暴露在瀏覽器中了。如下圖，其中XX.XX.XX.XX:8088/api/就是反向代理后的后端接口，真實接口地址並沒有暴露。
但是這樣依然有缺點：a）仍需要在vue工程中顯示地給出后端接口的地址；b）項目打包后，在Nginx中該方法會失效，具體原因不明。
3）在Nginx中設置反向代理
最后采用的解決辦法是在Nginx中使用反向代理。以下理解可能有誤：當在Nginx中設置反向代理后，瀏覽器發出的請求會傳送給Nginx，由Nginx決定請求發送至哪里。這樣就會有一個好處，因為Nginx和Tomcat在同一個IP地址內，因此Nginx可以直接通過127.0.0.1加端口號來訪問后端接口。這樣既無需顯示地給出后端接口地址（只要給個端口號），也可以在生產環境中使用反向代理，雲端同樣無需開放8081端口。
在Nginx中設置反向代理的方法如下，在nginx.conf中輸入（注意api后面有個/）：
location /api/ { proxy_pass http://127.0.0.1:8081/; }
就可以用 “vue前端地址/api/”來訪問位於8081端口的后端接口啦。vue中axios的設置與2）一致：
axios.defaults.baseURL = '/api'
補充：
經過上述方法，可以在post請求中訪問到后端的接口了。但是此時若在本地開發，需要修改axios的baseURL，不是很方便。因此，可以在main.js中使用以下代碼，判斷向前端服務器發出請求的是否為localhost，然后改變axios的baseURL：
let host = window.location.host // 主機 let reg = /^localhost+/ if (reg.test(host)) { // 若本地項目調試使用 axios.defaults.baseURL = 'http://localhost:8081' } else { // 遠程訪問 使用代理 axios.defaults.baseURL = '/api' }
經過上述方法，就解決了生產環境下，實現vue通過post訪問同一IP地址下的后端接口。