CORS 錯誤是什麼? 如何解決本地端跨域請求 CORS Error

最近經手別人的專案，非常有趣的剛好遇到了 CORS 的問題，所以就來快速地筆記一下，方便有遇到此問題的人取用。

這個方法，適用於你可以使用【管理員權限】打開/執行的情況下，如果本身遇到的是公司電腦，不具備管理員權限，請前往前端無痛解決 CORS Error 問題這篇進行觀看。

CORS 是什麼?

跨來源資源共享，英文全文為 Cross-origin resource sharing，英文縮寫 CORS。

CORS 做什麼的?

先來看看官方說法

用於讓網頁的受限資源能夠被其他域名的頁面存取的一種機制

維基百科

用白話來解釋，一般網頁透過 API 請求相關資源，基於安全性，只能允許同網域間進行請求。而 CORS 主要用於讓網頁能夠不受限制地，去向不同網域的資源與服務進行請求。

CORS Error 常見情況

最常見的情境，就是本地端跨網域請求，以下來用個實際例子。

如本機開發環境 localhost 去對 UAT 請求，當你請求時就會發現出現 CORS 的錯誤，你可以從兩個地方看到該錯誤，如下圖。

為了避免在開發上出現 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 : 覺得圖片太小，可以點選圖片看大圖喔 )

到這邊，就大致完成了，使用管理員權限打開後，你會看到以下畫面：

上圖會看到瀏覽器最上方，你會看到一段提示訊息，內容是”You are using an unsupported command-line flag: –disable-web-security. Stability and security will suffer.”，這樣就代表你建立成功了。

日後如果你需要進行本機端開發，你需要避免掉 CORS error 錯誤，可以使用該捷徑，來打開你需要的 URL 進行測試，就不會再抱錯了。

至於該訊息，關掉就好不用理它，你可以順利繼續開發了。

2022-02 更新補充 : 前端如何無痛解決 CORS Error 問題

如果你的開發環境，有權限被鎖住的問題，如大型企業集團、資安單位、金融產業…等特殊領域，可以看看以下這篇，可以快速幫你解決問題。

如何使用Chrome套件解決Localhost開發中的CORS問題 – 前端無痛解決 CORS Error 問題