CORS 是什麼？為什麼要有 CORS？

什麼是同源政策（Same-Origin Policy）？

同源政策是瀏覽器的安全機制，限制一個網頁只能讀取同源的資源。

同源的定義：協定（protocol）+ 網域（hostname）+ 埠號（port） 三者都相同。

URL	與 https://example.com 是否同源
https://example.com/page	✅ 同源
http://example.com	❌ 協定不同
https://api.example.com	❌ 子網域不同
https://example.com:8080	❌ 埠號不同

什麼是 CORS？

CORS（Cross-Origin Resource Sharing，跨來源資源共用） 是一套 HTTP 標頭機制，讓伺服器可以宣告哪些外部來源（origin）被允許存取其資源，從而有條件地放寬同源政策。

為什麼需要 CORS？

沒有同源政策，惡意網站可以用 JavaScript 偷偷對你已登入的銀行網站發請求，並讀取回應——這是典型的 CSRF / 資料洩漏場景。

CORS 讓伺服器說：「我允許來自 https://frontend.com 的請求。」

CORS 的運作方式

簡單請求（Simple Request）

符合以下條件的請求，瀏覽器直接發送並附上 Origin 標頭：

• 方法：GET、POST（Content-Type 限 application/x-www-form-urlencoded、multipart/form-data、text/plain）

伺服器回應加上：

Access-Control-Allow-Origin: https://frontend.com

瀏覽器才讓前端 JS 讀取回應；否則會報 CORS 錯誤。

預檢請求（Preflight Request）

不符合簡單請求的情況（如 PUT、DELETE、Content-Type: application/json、自訂 header），瀏覽器會先發一個 OPTIONS 請求詢問伺服器：

OPTIONS /api/data HTTP/1.1
Origin: https://frontend.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

伺服器回應允許：

Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: POST, PUT
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400

預檢通過後，瀏覽器才發送實際請求。

常見 Response Headers

Header	說明
Access-Control-Allow-Origin	允許的來源（* 或具體 origin）
Access-Control-Allow-Methods	允許的 HTTP 方法
Access-Control-Allow-Headers	允許的請求 header
Access-Control-Allow-Credentials	是否允許攜帶 cookie（需 true）
Access-Control-Max-Age	預檢結果快取秒數

若需要攜帶 cookie，Access-Control-Allow-Origin 不可設為 *，必須指定具體來源。

前端常見解法

1. 後端設定 CORS header（最正確的方式）
2. 開發時用 Proxy：Vite / webpack devServer proxy 繞過瀏覽器限制
3. JSONP（僅限 GET，已過時）

小結

• 同源政策是瀏覽器的安全機制，防止跨站讀取資料。
• CORS 是伺服器告訴瀏覽器「允許哪些跨來源請求」的機制。
• CORS 錯誤是瀏覽器阻擋，不是伺服器拒絕，後端改 header 即可解決。