前言

昨天我們聊了 API 常見的安全問題，今天要探討一個前端開發者 高機率會遇到 的問題： CORS（Cross-Origin Resource Sharing, 跨來源資源共享） 。

什麼是跨域（Cross-Origin）？

在瀏覽器中，如果兩個網址的「來源（Origin）」不同，就會被視為跨域。
一個來源（Origin）由三個部分組成：
Origin = 協定（Protocol） + 網域（Domain） + 埠號（Port）

例如：

• https://example.com:443
• http://example.com:80

即使是同一個網域，如果協定或埠號不同，也算不同來源。

瀏覽器的同源政策（Same-Origin Policy, SOP）

同源政策 是瀏覽器的一個安全機制：
預設情況下，網頁只能請求「同來源」的資源。

舉例：

• 你在 https://myapp.com 開啟前端頁面
• 嘗試向 https://api.another.com 發送 AJAX 請求
• 瀏覽器會擋下來，出現 CORS 錯誤

為什麼需要 CORS？

如果沒有同源政策，任何網站都可以隨意呼叫其他網站的 API，甚至帶上你的 Cookie。
這會導致：

• 使用者隱私外洩
• 惡意網站竊取資料

為了解決「安全」與「合法跨域需求」的矛盾，CORS 機制就誕生了。

CORS 的運作方式

當瀏覽器偵測到跨域請求時，它會先發送一個 預檢請求（Preflight Request） ，
這是一個 OPTIONS 請求，用來詢問伺服器是否允許跨域。伺服器如果允許，就會回應一些 CORS 標頭（Headers） ，例如：

• Access-Control-Allow-Origin: https://myapp.com
• Access-Control-Allow-Methods: GET, POST, PUT
• Access-Control-Allow-Headers: Content-Type, Authorization
  瀏覽器確認允許後，才會發送真正的請求。

常見的 CORS 設定

1. 允許所有來源（不建議）

Access-Control-Allow-Origin: *

-> 這樣任何網站都能請 API，不安全。

2. 指定允許的來源

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

-> 只允許可信任的前端網域存取。

3. 允許帶上認證資訊

Access-Control-Allow-Credentials: true

-> 需要搭配具體的網域（不能用 *），否則無效。

CORS 常見錯誤與解法

錯誤訊息

Access to fetch at 'https://api.example.com' from origin 'https://myapp.com' has been blocked by CORS policy

解決方式

• 在 API 伺服器端正確設定 Access-Control-Allow-Origin
• 如果需要帶 Cookie，要加上： Access-Control-Allow-Credentials: true
• 確認伺服器有處理 OPTIONS 預檢請求

小結

• 瀏覽器為了安全，實施「同源政策」
• CORS 是一種讓伺服器「選擇性」開放跨域存取的機制
• 核心在於伺服器回應的 HTTP 標頭
• 正確設定 Access-Control-Allow-Origin、Methods、Headers 才能避免 CORS 錯誤