紀錄工作經驗、相關知識,解決技術相關問題。

Node JS, React, 網站相關

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

CORS 是什麼? 解決本地端跨域請求 CORS Error

CORS 是什麼? 解決本地端跨域請求 CORS Error

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

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

CORS 是什麼?

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

CORS 做什麼的?

先來看看官方說法

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

維基百科

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

CORS Error 常見情況

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

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

Console log CORS Error
Network Fetch/XHR CORS Error

為了避免在開發上出現 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 端的設定,要解決問題,一定要先弄懂概念,所以不要搞錯了,這不是你該解決的問題

以安全性角度來看,過度寬鬆,也會造成安全性風險提高,所以在設定時,請留意是要以白名單下去設定,還是全部開放。

CORS Error 示意圖

使用 Chrome 避免開發遇到 CORS Error

如果你是前端,你只是為了因應開發需求,希望在localhost 中能進行 CORS 跨域請求,以下提供你一個簡單的做法,就是透過管理員權限關閉 Chrome的 CORS 功能,做法如下。

( PS : 覺得圖片太小,可以點選圖片看大圖喔 )

所需時間: 3 minutes.

Chrome 避開 CORS 操作步驟

  1. 找出你Chrome的執行檔安裝路徑

    每個Uesr安裝的路徑都不太相同,所以建議你確認一下,作法如圖:

  2. 記錄下你的 Chrome 執行檔路徑

    把路徑記錄下來,可以開記事本紀錄,或是常用的 VSCode 也可以。

  3. 加入代碼/指令

    在你紀錄的路徑後面,加上以下代碼:
    –disable-web-security –disable-gpu –user-data-dir=~\chromeTem

  4. 建立一個捷徑

    這邊建立一個捷徑,用來日後開啟需要跨網域請求的連結。

  5. 設定捷徑的項目位置

    將剛剛記錄下來的執行檔案路徑,連同步驟3的代碼/指令,組合好貼入”輸入項目的位置”中。

  6. 為新捷徑取個名字

    自己命名一個名稱吧,以便你日後識別它。

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

使用 Chrome 避開 CORS Error

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

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

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

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

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

2 留言

  1. 匿名訪客

    麻烦后面加一句以管理员身份打开。。。。

發表迴響