什麼是跨來源資源共用（CORS）

在伺服器許可的範圍內，允許受同源政策限制的、對其他來源的請求及讀取其回應的機制。伺服器以Access-Control-Allow-Origin等回應標頭，表示允許哪些來源讀取。對於Content-Type為application/json的POST這類單純表單送出無法產生的請求，瀏覽器會先以OPTIONS方法送出事前確認（預檢，preflight）。這是由瀏覽器遵守的規則，並不是保護伺服器免於攻擊的機制。

日文名稱: CORS(オリジン間リソース共有)

「跨來源資源共用（CORS）」出現在1領域的1道練習題中（Web技術基礎等）。

這個名詞所屬的領域: Web技術基礎

簡單請求與預檢

GET，以及以表單可送出之格式（application/x-www-form-urlencoded、multipart/form-data、text/plain）的POST等，不經確認就會送出，Access-Control-Allow-Origin只決定指令碼能否讀取回應。使用其他方法、Content-Type或自訂標頭的請求，瀏覽器會先以OPTIONS，透過Access-Control-Request-Method等告知要使用的方法與標頭。伺服器回傳許可後，瀏覽器才送出原本的請求。

附上Cookie時

要在送往其他來源的請求中附上Cookie，指令碼端必須指定credentials，伺服器也必須回傳Access-Control-Allow-Credentials: true。此時Access-Control-Allow-Origin不能使用代表全部的 *，必須具體寫出允許的來源。允許的來源範圍過大，可能讓其他網站讀到使用者的資訊。

常見的誤解

CORS錯誤表示瀏覽器沒有把回應交給指令碼，請求本身可能已經送達伺服器。此外，CORS是瀏覽器遵守的規則，不會阻止命令列工具或其他伺服器送出的請求。要保護伺服器的資料，必須另外進行身分驗證與權限確認。

練習跨來源資源共用（CORS）的題目

https://app.example.com 網頁的JavaScript，要使用fetch對 https://api.example.net/orders 送出附有Content-Type: application/json本文的POST請求。此時跨來源資源共用（CORS）的行為，下列何者正確？

ACORS在瀏覽器以外也有作用，因此沒有伺服器的許可時，從命令列工具送出的POST也會在網路途中被擋下
B瀏覽器先以OPTIONS方法送出事前確認（預檢），只有在伺服器以標頭回傳許可時，才送出原本的POST
C對不同來源的請求一律不經確認就送出，即使伺服器在回應中什麼都不附加，網頁的JavaScript也能讀取回應

查看答案與解析

正確答案：B. 瀏覽器先以OPTIONS方法送出事前確認（預檢），只有在伺服器以標頭回傳許可時，才送出原本的POST

CORS是在伺服器許可的範圍內，允許受同源政策限制的、對其他來源的請求及讀取其回應的機制。Content-Type為application/json的POST，是單純的表單送出無法產生的請求，因此瀏覽器會先以OPTIONS告知要使用的方法與標頭，確認是否許可。若伺服器的回應中沒有Access-Control-Allow-Origin等許可，瀏覽器就不會送出原本的請求。CORS是瀏覽器遵守的規則，因此伺服器必須另外以身分驗證與權限確認保護自己。

常見問題

CORS錯誤可以在用戶端修正嗎？

不行。允許哪些來源讀取是由伺服器決定，因此必須在API伺服器的回應中加上適當的許可標頭。若是自己沒有管理的API，也可以改經由自己的伺服器呼叫。

同源政策與CORS是什麼關係？

同源政策原則上禁止讀取其他來源的回應，CORS則是在伺服器明確表示的範圍內允許例外的機制。若伺服器沒有回傳CORS許可，同源政策的限制就會照樣作用。

解析中的「跨來源資源共用（CORS）」

CORS是在伺服器許可的範圍內，允許受同源政策限制的、對其他來源的請求及讀取其回應的機制。
https://app.example.com 網頁的JavaScript，要使用fetch對 https://api…

出現「跨來源資源共用（CORS）」的題目（1題）

https://app.example.com 網頁的JavaScript，要使用fetch對 https://api.example.net/orders 送出附有Content-Type: application/json本文的POST請求。此時跨來源資源共用（CORS）的行為，下列何者正確？