分類: 網頁開發

修改 Chrome 瀏覽器安全性設定,解決網頁開發階段 Access-Control-Allow-Origin 問題

本文敘述如何修改Chrome 瀏覽器安全性設定,讓網頁開發階段避免 Access-Control-Allow-Origin 的問題。

架構比較複雜的網頁,可能會同時使用多台主機的資源(也就是所謂的 CORS),像是以 Ajax 的技術連線至其他台伺服器,但是因為安全性的因素,瀏覽器預設不允許 JavaScript 任意存取其他伺服器的資源,導致出現類似這樣的錯誤:

XMLHttpRequest cannot load http://localhost:8080/HpcService/upload?path=~. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:1841' is therefore not allowed access.


這個訊息在打開瀏覽器開發人員工具的 Console 就可以看到,的畫面就像這樣:

Google Chrome 開發人員工具

正常的做法是要變更網頁伺服器的設定,加上 Access-Control-Allow-Origin 這個標頭,不過在開發階段有時候沒有辦法按照正式的做法修改伺服器,這時候我們就可以關閉瀏覽器的安全性檢查功能,暫時避開這個問題。

將瀏覽器安全性檢查功能關閉的方式,僅適用於網頁的開發與測試,請不要拿來瀏覽一般的網頁。

這裡我示範 Google Chrome 瀏覽器的做法,若是在 Mac OS X 中,則使用終端機來開啟 Google Chrome,並加上 --disable-web-security 這個參數:

open -a Google Chrome --args --disable-web-security --user-data-dir ~/tmp/chrome/

以這樣的方式所開啟的 Google Chrome 會出現一條警告訊息,告知使用者這樣是不安全的,在這個模式之下,Google Chrome 就不會去檢查 Access-Control-Allow-Origin,對於開發者會方便許多。

Google Chrome 瀏覽器(Mac OS X)

Windows 的 Google Chrome 瀏覽器也是可以用一樣的方式啟動:

"C:Program Files (x86)GoogleChromeApplicationchrome.exe" --user-data-dir="C:/Chrome dev session2" --disable-web-security

我們可以在命令提示字元中執行這行指令,或是直接修改桌面上的 Google Chrome 瀏覽器的捷徑,把這裡新增的參數貼上去。

Google Chrome 捷徑內容

這是在 Windows 中開啟 Google Chrome 視窗的畫面,同樣會出現一行警告訊息。

Google Chrome 瀏覽器(Windows)

在 Linux 中若使用 Chromium 瀏覽器,則執行:

chromium-browser --disable-web-security --user-data-dir

如果是 Google Chrome 瀏覽器,則執行:

google-chrome --disable-web-security --user-data-dir

Linux 中的 Chrome 畫面也是類似的狀況。

Google Chrome 瀏覽器(LInux)

最後再提醒一點,這裡將 Google Chrome 瀏覽器的安全性檢查關閉的方式,只適合網頁開發者用於開發階段,不可以拿這種模式的瀏覽器來上網,因為它的安全性比較低,若遇到惡意程式的話,就比較容易出問題。

參考資料:http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resourcestackoverflow

G. T. Wang

個人使用 Linux 經驗長達十餘年,樂於分享各種自由軟體技術與實作文章。

Share
Published by
G. T. Wang
標籤: Chrome資訊安全

Recent Posts

光陽 KYMCO GP 125 機車接電發動、更換電瓶記錄

本篇記錄我的光陽 KYMCO ...

2 年 ago

[開箱] YubiKey 5C NFC 實體金鑰

本篇是 YubiKey 5C ...

2 年 ago

[DIY] 自製竹火把

本篇記錄我拿竹子加上過期的苦茶...

3 年 ago