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. 點擊瀏覽器右上角的菜單按鈕打開谷歌瀏覽器的擴展管理頁面

 

 

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

 

 

 

 

使用方式

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

 

注意事項

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM