在開發網站時 (特別是 ReactJS 時)，網站主機 (Web Hosting Server) 和應用程式主機 (Application Server) 很多時都不會是同一台主機。如果在沒有設定 proxy 的情況下，在網站使用 Ajax 載入外部資料時便會出現 `Access-Control-Allow-Origin` 例外。 > Access to XMLHttpRequest at 'https://19site.net/files/7d/79/7d790b71-7af2-4b0b-890d-65c513f4077e.jpeg' from origin http://192.168.1.147:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ### 源因 這是因為安全性的因素，瀏覽器預設不允許 JavaScript 任意存取其他伺服器的資源。以免因為 Session 而能夠載入先前登入過的網站，然後把資料經過惡意網站上載到第三方地址，達到偷取個人資料的功能。  ### 解決方法 解決方法有二 : - 修改 Application Server 的應用程式，使回應的檔頭 (Response Header) 加入 `Access-Control-Allow-Origin` 並設定為相應的 IP 地址。 - 關閉 Chrome 的網站安全設定。 (本文提及的方法) 注意 : 關閉 Chrome 的網站安全設定隻能生效在本機上，如果正式 Production 的話記得到設定好 Server Application 才對啊 ! 另外要留意是關閉了網站安全設定代表你的 Chrome 並不是在安全環境下運行著，不要用這個 Session 的 Chrome 來作為日常使用 ! 不然便會有機會被惡意網站偷取個人資料了 ! ### 進入正題 實際的操作是在啟動 Chrome 時加入參數 `--disable-web-security`。 在 Window 上，我們可以建立以下 Shortcut : > "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:/Chrome-dev-session" --disable-web-security  然後我們可以使用新建立的連結來啟動 Chrome。 會看到在啟動時會有警告的字句，提醒使用者使用 `--disable-web-security` 會危害穩定及安全性。  再次提醒一次，不要用這個 Session 的 Chrome 來作為日常使用 ! 不然便會有機會被惡意網站偷取個人資料了 ! > 參考資料 : https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-get-a-no-access-control-allow-origin-header-is-pr