[Web] 同源政策與跨來源資源共用(CORS)
keywords: CORS
, Cross-Origin Resource Sharing
, 同源策略
, Same-origin policy
👍 CS Visualized: CORS @ dev
TL;DR;
- 預設的情況下,瀏覽器同源會遵守同源政策(same-origin policy),並不允許跨域請求(cross-origin)。在 server 未允許的情況下,會得到 blocked by CORS policy 的錯誤。
- 如果 client 希望能過取得跨域的資源,需要由 server 在 response header 中帶上
Access-Control-Allow-Origin
的欄位。
同源政策(same-origin policy)
在同源政策(same-origin policy)中規範了那寫資源可以跨源存取,哪些會受到限制。
同源的定義簡單如下:
- 不同網域(Domain)
- 不同通訊協定:HTTP, HTTPS, FTP
- 不同連接埠號(Port)
一般來說跨來源寫(Cross-origin writes)、跨來源嵌入(Cross-origin embedding)是被允許的,而跨來源讀取(Cross-origin reads)是受限制的。
- 同源政策 @ MDN
跨來源資源共用(cross-origin-resource-sharing, CORS)
fetch('https://www.google.com')
.then(function (response) {
// Do something ...
})
.catch(function (error) {
// Do something else ...
});
這時候會出現經典的 Cross-Origin Resource Sharing(CORS) 問題:
這個問題會發生在當你的來源(origin),和你發送請求對象的來源是不同時。這是基於瀏覽器安全性考量所定義的規範,稱做同源政策(Same Origin Policy),也就是說程式碼所發出的跨來源 HTTP 請求(cross-origin HTTP Request)會受到限制。
基於安全性考量,程式碼所發出的跨來源 HTTP 請求會受到限制。例如,XMLHttpRequest
及 Fetch
都遵守同源政策(same-origin policy)。這代表網路應用程式所使用的 API 除非有回傳 CORS 標頭(例如,Access-Control-Allow-Origin
),否則只能請求與應用程式相同來源的 HTTP 資源。
在這個情況下,其實請求(request)已經發出去了,而瀏覽器其實也拿到回應(response),但是瀏覽器基於同源政策,因此不把拿到的回應給你的 JavaScript 去做進一步的處理。
開啟跨來源請求
若要開啟跨來源請求,必須在伺服器端做一些設定,像是在 Response Header
加上 Access-Control-Allow-Origin
:
Access-Control-Allow-Origin: * # 允許所有網站發送的請求
Access-Control-Allow-Origin: http://foo.example # 只允許 http://foo.example 的請求