最近一直在通過 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-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” 一下，不然瀏覽器還是可能會報錯。