Web 筆記 - 同源政策與 CORS 概念

會寫這個主題主要是因為之前在 chrome 的 console 頁利用 Ajax fetch() 來提取 API 資料時，遇到 CORS (Cross Origin Resource Sharing, 跨來源資源共用) 的問題，如下方程式碼:

發生了什麼事?

當我們透過 Fetch 方式來向 API 取得資源是，常見的應用是向後端 API 拿取資料交給前端，然而，然而利用 JavaScript fetch() 發起需求 (request) 時，必須遵守同源政策 (Same-Origin Policy) ，該政策下會強制你遵守 CORS 的規範。

何為同源?

同源需滿足三種條件:

1. 相同協定 (protocol)，即 http/https
2. 相同網域 (domain)
3. 相同通訊埠 (port)

EX: 與https://example.com/a.html 同源的有那些

• https://example.com/b.html => yes
• http://example.com/c.html => (no, 不同 protocol )
• https://subdomain.example.com/d.html => (no,不同 domain )
• https://example.com:8080/e.html => (no,不同 port )

CORS & 跨來源請求 (Cross-Origin Request)

非同源的情況下，會產生跨來源 http 請求 (cross-origin request) ; 如上面的程式碼出現的錯誤，產生的跨來源請求因為伺服器設定沒有遵守 CORS 規範，所以出現錯誤。

如何解決?

解決的方式有兩種，一是請 API 的開發者開放 CORS 權限，第二種相對比較容易，透過第三方資源來協助存取 (ex: cross-anywhere)，使用方式很簡單就只是將 cors-anywhere 所提供的 API 網址放前面，\後面加上你要訪問的 API 內容網址。

這裡的第三方資源即是跨域代理伺服器 (CORS PROXY)，利用伺服器端程式來繞過此問題

參考資料

• Shubo's Notes
• 1010 Code
• Jonas's JavaScript Course