1. 程式人生 > >vue-cli反向代理跨域請求

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-CLI腳手架為我們生成的開發環境中可以在 config 資料夾下找到 index.js。該js檔案是專案的主要配置(包括監聽dua口、打包路徑等)。再找到proxyTable屬性。

 

proxyTable讓頁面所在本地伺服器去跨域訪問其他伺服器上的資源。因為同源策略是瀏覽器限制,而伺服器之間跨域的訪問是不受同源策略的影響的。

 簡單測試一下:

結果:

 

 

最後需要注意的是,修改了 proxyTable 屬性後,一定要將專案重新 “npm run dev” 一下,不然瀏覽器還是可能會報錯。