1. 程式人生 > >Chrome瀏覽器開啟Ajax跨域訪問調試

Chrome瀏覽器開啟Ajax跨域訪問調試

菜單 *** -c 有一個 alt png cors 參考 之前

  由於瀏覽器安全性限制,Ajax是不能跨域訪問的,而我們在日常開發工作中,經常會出現本地開發環境需要訪問其他服務器上的API情況。提示信息為:

  技術分享圖片

  Access to XMLHttpRequest at ‘http://****‘ from origin ‘null‘ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

  在當今前後端分裏模式開發越來越多,使用Ajax進行數據交互時常有跨越發生。

  本文說明如何讓Chrome瀏覽器支持開發時的Ajax跨域訪問。

1.升級Chrome到最新版本

參考下面經驗"如何離線安裝Chrome最新版本或某一特定版本?",將Chrome升級到最新版本。

如何離線安裝Chrome最新版本或某一特定版本?

2.創建一個調試用的Chrome快捷方式

右鍵選擇Chrome快捷方式,在彈出的右鍵菜單中選擇"創建快捷方式",重命名新建的快捷方式為Chrome-Debug

技術分享圖片技術分享圖片

3.打開Chrome-Debug快捷方式屬性

右鍵選擇Chrome-Debug快捷方式,右鍵菜單中選擇"屬性",打開Chrome-Debug快捷方式屬性設置對話框。

技術分享圖片

4.增加啟動參數

在目標後面增加如下的啟動參數:--user-data-dir="c:\ChromeDebug" --test-type --disable-web-security

,點"確定"按鈕保存設置。完整的目標內容如下所示:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="c:\ChromeDebug" --test-type --disable-web-security

註:

  • 每個--前面都有一個空格。
  • disable-web-security需要搭配user-data-dir參數一起設置。

5.打開Chrome-Debug

因為啟動參數中增加了--user-data-dir="c:\ChromeDebug",表示Chrome會從c:\ChromeDebug中存取用戶數據,因該目錄可能為空,所以新打開的Chrome-Debug窗口是一個全新的Chrome,沒有書簽、歷史、擴展程序等內容,需要再重新安裝擴展程序。

技術分享圖片

6.調試跨域訪問

再次打開之前出錯的程序,就可以發現Ajax已經可以正常跨域訪問了。

參考自百度經驗

Chrome瀏覽器開啟Ajax跨域訪問調試