最近經手別人的專案,非常有趣的剛好遇到了 CORS 的問題,所以就來快速地筆記一下,方便有遇到此問題的人取用。
這個方法,適用於你可以使用【管理員權限】打開/執行的情況下,如果本身遇到的是公司電腦,不具備管理員權限,請前往前端無痛解決 CORS Error 問題這篇進行觀看。
CORS 是什麼?
跨來源資源共享,英文全文為 Cross-origin resource sharing,英文縮寫 CORS。
CORS 做什麼的?
先來看看官方說法
用於讓網頁的受限資源能夠被其他域名的頁面存取的一種機制
維基百科
用白話來解釋,一般網頁透過 API 請求相關資源,基於安全性,只能允許同網域間進行請求。而 CORS 主要用於讓網頁能夠不受限制地,去向不同網域的資源與服務進行請求。
CORS Error 常見情況
最常見的情境,就是本地端跨網域請求,以下來用個實際例子。
如本機開發環境 localhost 去對 UAT 請求,當你請求時就會發現出現 CORS 的錯誤,你可以從兩個地方看到該錯誤,如下圖。
![](https://i0.wp.com/seanacnet.com/wp-content/uploads/2021/12/CORC-Console-log.png?resize=616%2C111&ssl=1)
![](https://i0.wp.com/seanacnet.com/wp-content/uploads/2021/12/CORC-Network-Featch-XHR.png?resize=616%2C91&ssl=1)
為了避免在開發上出現 CORS Error,導致開發卡關或是進度落後,就要先對CORS做相關設定,來避免產生跨域請求的問題。
如何解決 CORS Error (CORS 跨域請求錯誤)
要解決 CORS 跨域請求錯誤,先了解你的網站服務到底是哪種架構,是常見的 React 前後端分離 CSR 架構,還是一般.net、PHP 常走的 SSR 架構。
要了解架構請看 什麼是 SSR , CSR 架構? 差別在哪?
兩個的解決方法不太相同,如果你是.net、PHP 這類,走 SSR架構的,你需要去 Server 那邊進行設定。
以PHP 為例,我們通常會在API服務端那邊,加上以下 Code,來允許跨域請求。
header('Access-Control-Allow-Headers: Content-Type');
header('Access-Control-Allow-Origin:*'); // 不限制請求來源,一律允許
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
以 React 為例子,React 通常搭配 node.js 後端,node.js 的相關套件也有很多,比方網路上查到最多的就是利用 cors 套件,並進行相關設定,來解決跨域 CORS Error 的問題。
我只是前端,碰不到後端,該如何解決 CORS Error ?
一個概念必須要注意,CORS 是允許與否,取決於 Server 端的設定,要解決問題,一定要先弄懂概念,所以不要搞錯了,這不是你該解決的問題。
以安全性角度來看,過度寬鬆,也會造成安全性風險提高,所以在設定時,請留意是要以白名單下去設定,還是全部開放。
使用 Chrome 避免開發遇到 CORS Error
如果你是前端,你只是為了因應開發需求,希望在localhost 中能進行 CORS 跨域請求,以下提供你一個簡單的做法,就是透過管理員權限關閉 Chrome的 CORS 功能,做法如下。
( PS : 覺得圖片太小,可以點選圖片看大圖喔 )
需要時間: 3 分鐘
Chrome 避開 CORS 操作步驟
到這邊,就大致完成了,使用管理員權限打開後,你會看到以下畫面:
![](https://i0.wp.com/seanacnet.com/wp-content/uploads/2021/12/image.png?resize=616%2C417&ssl=1)
上圖會看到瀏覽器最上方,你會看到一段提示訊息,內容是”You are using an unsupported command-line flag: –disable-web-security. Stability and security will suffer.”,這樣就代表你建立成功了。
日後如果你需要進行本機端開發,你需要避免掉 CORS error 錯誤,可以使用該捷徑,來打開你需要的 URL 進行測試,就不會再抱錯了。
至於該訊息,關掉就好不用理它,你可以順利繼續開發了。
2022-02 更新補充 : 前端如何無痛解決 CORS Error 問題
如果你的開發環境,有權限被鎖住的問題,如大型企業集團、資安單位、金融產業…等特殊領域,可以看看以下這篇,可以快速幫你解決問題。
匿名訪客
麻烦后面加一句以管理员身份打开。。。。
米糕
好的,非常感謝提醒,這邊會再一開始的地方多加標註。
另外,如果CORS被管理權限限制,可以看看這篇,可以再不需要管理員權限的情況下解決問題。
https://seanacnet.com/website-related/cors-error-chrome-easy-cors/
如果還有其他寶貴的建議,也請直接跟我說。