CORS: Cross Origin Resourece sharing - ianchen0119/About-Security GitHub Wiki

關於 CORS ，在 MDN web docs 上有詳細的解說，筆者把上面的內容引用過來逐一講解：

跨來源資源共用（Cross-Origin Resource Sharing (CORS)）是一種使用額外 HTTP 標頭令目前瀏覽網站的使用者代理取得存取其他來源（網域）伺服器特定資源權限的機制。當使用者代理請求一個不是目前文件來源——例如來自於不同網域（domain）、通訊協定（protocol）或通訊埠（port）的資源時，會建立一個跨來源 HTTP 請求（cross-origin HTTP request）。

白話文來解釋的話：就是使用者訪問了一個網站，但是該網站中有部分圖片或是其他資源並不存在於同一台伺服器上。這時候，瀏覽器就會為我們做跨來源的 HTTP 請求。

舉例：

• CDN

  網站 A 透過 CDN 引用了相關框架做開發，這時我們可以在網頁原始碼中發現：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

• 圖片資源

  網站 A 內嵌入了一些圖片，這些圖片來自於其他伺服器上：

  <img src="https://s4.itho.me/sites/default/files/styles/picture_size_large/public/field/image/v1_wide.jpg?itok=aqrO_0jM"/>

上圖同樣取自 MDN Web Docs 。

基於安全性考量，程式碼所發出的跨來源 HTTP 請求會受到瀏覽器限制。像是 XMLHttpRequest 及 Fetch 都遵守必須同源政策（same-origin policy）。這代表網路應用程式所使用的 API 除非使用 CORS 標頭，否則只能請求與應用程式相同網域的 HTTP 資源。