昨天說到當我們需要向不同源的網頁，拿資料會因為同源政策，被擋下來，
如果需要拿到不同源網頁的資料，就需要使用 CORS。

CORS ( Cross-Origin HTTP request) 跨來源資源共用

那我們要做什麼事情，才能夠存取我們想要的資料？

伺服器端的部分，在 Response 的 Header 內標題需要含有 Access-Control-Allow-Origin 欄位，收到回覆(response)的瀏覽器端會去檢查這個欄位，如果有，就能通過，但是如果不符合條件則會因為同源政策的關係被擋下，然後出現錯誤訊息。

瀏覽器端的部分，會把請求區分成兩種分類，一種是簡單請求，另外一個是預檢請求。

簡單請求

須滿足兩種條件，

1. 只允許下列 HTTP 方法：

• HEAD
• GET
• POST

2. 「CORS 安全列表請求標頭（CORS-safelisted request-header）」的標頭

• Accept
• Accept-Language
• Content-Language
• Content-Type（但請注意下方的額外要求）
• Last-Event-ID
• DPR
• Save-Data
• Viewport-Width
• Width

當瀏覽器判斷你發出的請求是簡單請求時，他會直接將請求發送出去。

預檢請求

瀏覽器請求會先以 HTTP 的 OPTIONS 方法送出請求到另一個網域，確認後續實際（actual）請求是否可安全送出，由於跨站請求可能會攜帶使用者資料，所以要先進行預檢請求，伺服器回覆之後瀏覽器會根據回覆的內容決定要不要將真正的請求發送出去。

下圖為預檢請求的示意圖

解決方法

1. 伺服器端需要在回應的 Header 加上如 Access-Control-Allow-Origin、Access-Control-Request-Method、Access-Control-Request-Headers 等設定，限制伺服器能接受的來源、使用的方法、可攜帶的 Header 等等。
   當瀏覽器發送資源請求時，如果是簡單請求，就會直接送出請求；如果不是簡單請求就會透過預檢請求，確認是否可以通過伺服器限制，才會發送正式的請求。

2. 架一個 Node.js 的 Server，透過 axios 拿資料、透過 koa 丟資料出來，然後再開放 CORS 。

3. 使用套件 cors-anywhere

以上，明天見