Chrome 調試跨域問題解決方案之插件篇

跨域，就是A域名下的js，想請求B域名下的接口數據。
跨域，只存在於瀏覽器端。App和小程序不存在跨域問題。
跨域，分瀏覽器策略和服務器策略。

• 若是服務器配置了容許跨域，那就沒有跨域問題
• 若是uni-app發佈的H5頁面和服務器接口部署在同一個域名下，那就沒有跨域問題
• 若是服務器不能配跨域，開發期間爲了調試方便，想讓開發機的ip能夠跨域訪問服務器接口，那麼能夠在開發機chrome上安裝一個跨域插件。詳見下：

本插件並不是萬能，請仔細閱讀與學習瀏覽器安全策略相關知識，請勿不看就噴，明白的請向下滾動繼續閱讀

當咱們使用谷歌瀏覽器調試ajax請求的時候可能會遇到這兩個問題：

• 跨域資源共享 詳見：CORS
• 跨源讀取阻塞 詳見：CORB

最多見的就是關於跨域資源共享的問題，也就是咱們一般說的跨域。當咱們本地服務器預覽頁面，使用ajax訪問遠程服務器的內容時就會請求失敗，好比：本地預覽的地址是：http://localhost:8080/，訪問的接口地址是http://dcloud.io/api。

若是僅僅是爲了本地預覽，能夠使用Chrome瀏覽器插件來協助調試。
!!! 本插件只能解決簡單請求的跨域調試（點擊搜索什麼是簡單請求）。對於非簡單請求的OPTION預檢（點擊搜索什麼是預檢請求）以及線上服務器也有跨域需求的用戶，能夠服務端配合解決。

插件名稱：Allow-Control-Allow-Origin: *

安裝方式：

在線安裝

使用谷歌瀏覽器直接打開插件地址https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi安裝便可

離線安裝

國內用戶若是沒法在線安裝，可在本頁面底部下載附件，離線安裝

1. 下載獲得:Allow-Control-Allow-Origin.crx
2. 點擊瀏覽器右上角的菜單按鈕打開谷歌瀏覽器的擴展管理頁面

 

 

3. 將下載的擴展插件拖入擴展管理頁面

 

 

 

 

使用方式

1. 打開待調試的頁面
2. 在擴展欄目找到安裝的插件，點擊打開插件配置
3. 輸入想要進行跨域調試的接口的地址，點擊添加便可

 

注意事項

• 此插件適合本地調試使用，線上部署若是和接口不一樣域還須要服務端配合。
• 若是實際響應的內容與瀏覽器預期的內容有差別還可能被CORB策略所阻止。

 

• Allow-Control-Allow-Origin_1_0_3_0.crx_.zip