# CORS 跨來源資源共用 📝
###### tags: `Website`

:::warning
當網頁進行跨領域請求時，瀏覽器會根據「 同源政策 」判定是否攔截請求的回應。
:::
> CORS（Cross-Origin Resource Sharing）is a mechanism that allows a website on one url to request data from a different url.
> Access-Control-Allow-Origin、Access-Control-Request-Method、Access-Control-Request-Headers
> CORS 是一種機制，他允許一個網站（網址）發送請求從另一個網址取得資料。
> 透過 伺服器在 HTTP Header 的設定，讓瀏覽器能取得不同來源的資源。

- DOM 的同源政策
- Cookie 的同源政策

## 常見的跨領域請求
- 使用 XMLHttpRequest 或 Fetch API 進行跨站請求。
- 網頁字體（@font-face）
- CSS 樣式表
- 使用 WebGL API（在任何相容的網頁瀏覽器中呈現互動式2D和3D圖形）。
- 使用 Canvas drawImage（動態組合圖片或作為背景）。

## Same-origin policy 同源政策
>考量到使用者的資訊安全，瀏覽器們針對跨域請求的行為制定了同源政策，一旦被判定為非同源，從目標資源取得的回應（Response）就會被攔截。


目標資源與當前網頁的網域（domain）、通訊協定（protocol）或通訊埠（port）只要有任一項不同，就算是不同來源。

簡單請求 simple requests
預檢（Preflighted）

## CORS 跨來源資源共用
透過設置HTTP Request Heaader取得
Access-Control-Allow-Origin
Access-Control-Request-Method
Access-Control-Request-Headers

cookie問題

代理伺服器（或簡易反向代理 nginx）

<!-- 
-->