Vue-cli解決開發環境的跨域問題

對於前端開發人員來講，當你在開發環境中與後台開發人員進行數據聯調時，總會遇到煩人的跨域問題！

解決跨域的方法有很多種，比如你和後台人員經過友好協商後，你可以通過JSONP的方式或者讓後台人員將代碼設置為允許你進行跨域！但是往往前後台開發人員的配合默契度是不太高的。如果後台只給你介面，並明確告訴你不允許修改介面，怎麼辦？怎麼辦才能實現跨域？此時你就可以通過proxyTable來解決跨域問題！

通過proxyTable解決跨域在Vue-cli當中是很簡單的。只需修改config文件夾下的index.js中的proxyTable就能實現：

以上代碼的「/api"你可以認為用於代替target裡面的地址，調取介面的地址直接用api來替換。

比如後台介面地址為："http://www.zhangpeiyue.com/user/login"。

你可以直接寫為："/api/user/login"即可。

當然，你也可以根據不同的API域名所負責的模塊不同來進行多項配置：

以上代碼"/adv"與"/user"分別負責項目中的廣告模塊與用戶模塊。

例如：

介面地址：「http://adv.zhangpeiyue.com/add」，

前端調取API介面應寫：axios.get("/adv/add")

注意：

配置修改完以後一定要重新npm run dev 一次

補充：

changeOrigin的屬性值為一個布爾值，如果設置為true，那麼本地會虛擬一個NODE服務端接收你的請求並代你發送該請求(中間件)。因為服務端語言是沒有跨域問題的，所以這樣最終就解決了跨域問題了。不過這隻適用於開發環境，上線後可以使用反向代理nginx。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！