[CORS] 跨來源資源共用

跨來源資源共用，Cross-Origin Resource Sharing (CORS)

跨來源資源共用 (CORS)

Cross-Origin Resource Sharing

因為資安的原因，瀏覽器限制網頁只能使用跟自己同樣Origin（Protocal、Domain和Port一樣）的資源，但有的時候我們的資料來源可能來自不同Domain。這時候可以透過設定CORS，讓網頁能存取指定的Origin的資源。

Origin

• 表示抓資料的來源，所以Cross-Origin顧名思義就是跨來源（跨domain）的意思。
• 位於 Request header 中
• 當CORS請求或POST請求時會發送
• 值： domain （例如 https://medium.com/）

Preflight

當跨來源請求時，瀏覽器會先發送一個Preflight/OPTIONS請求，通過之後才會發送原本真正的請求。但有一個情形例外，就是 Simple request。如果是 Simple request 則不會發送Preflight，會直接發送原本的請求。

若是 Simple requests 則需滿足以下條件：

Methods必須是以下其中一個：

• Get
• Post
• Head

Content-Type 必須是以下其中一個：

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

只可以手動設定以下 Header：

• Accept
• Accept-Language
• Content-Language
• Content-Type (必須是上面三種其中一種)
• DPR
• Downlink
• Save-Data
• Viewport-Width
• Width