vue-cli反向代理跨域請求

最近一直在經過 webpack + Vue-CLI 來學習，想跨域調用接口數據。奈何因同源策略，瀏覽器限制，致使資源請求一直不成功。

如今整理一下思路 — —

跨域：

指瀏覽器受同源策略限制，不可以訪問不一樣域的頁面（腳本）。

同源策略限制已下行爲：

• • LocalStorage 和 IndexDB 沒法讀取
  • DOM 和 JS 對象沒法獲取
  • Ajax請求發送不出去（一個XMLHttpRequest對象的請求）

什麼是同源策略？

Netscape（網景）公司的一個安全策略。所謂的源指的是

Protocol://domain:port

//協議         域名      端口

當頁面A向頁面B作了一個Ajax請求。只要以上協議、域名和端口有一處不一樣。那就是跨域，將被瀏覽器限制訪問。

多數狀況下，頁面請求資源有多種。同源策略限制了Ajax請求。像Html標籤中，如<img>、<script>等的src屬性，不受同源策略影響，能夠請求其餘域中的資源。

前端中經常使用的JSONP跨域請求原理就是基於此。

 

Vue-CLI本地代理設置跨域之proxyTable

（如下在VUE開發過程當中調用後臺數據頗有用）

先說一下手頭資源：

• Vue-CLI版本：2.5.2
• 請求的後臺接口：https://api.bzqll.com/music/netease/songList?key=579621905&id=3778678&limit=10&offset=0（詳情可看：雲音樂/QQ音樂API更新,支持多音質切換/MV獲取）

Vue-CLI腳手架爲咱們生成的開發環境中能夠在 config 文件夾下找到 index.js。該js文件是項目的主要配置（包括監聽dua口、打包路徑等）。再找到proxyTable屬性。

 

proxyTable讓頁面所在本地服務器去跨域訪問其餘服務器上的資源。由於同源策略是瀏覽器限制，而服務器之間跨域的訪問是不受同源策略的影響的。

 簡單測試一下：

結果：

 

 

最後須要注意的是，修改了 proxyTable 屬性後，必定要將項目從新 「npm run dev」 一下，否則瀏覽器仍是可能會報錯。