Intro
跨來源資源共享(英語:Cross-origin resource sharing,縮寫:CORS),用於讓網頁的受限資源能夠被其他域名的頁面存取的一種機制。
跨來源資源共享標準描述了,新的 HTTP 頭部在瀏覽器有權限的時候,應該以如何的形式傳送請求到遠端 URLs。雖然伺服器會有一些校驗和認證,但是瀏覽器有責任去支援這些頭部以及增加相關的限制。
實作
Backend
後端部分,Server Header 可以定義Access-Control-Allow-Origin
來允許瀏覽器跨域請求;以及Access-Control-Allow-Credentials
允許臉器援跨域認證。
以 PHP 動態 Header 為例:
// 回覆表明允許全域(*)跨域
header("Access-Control-Allow-Origin: *");
// 回覆表明允許跨域認證
header("Access-Control-Allow-Credentials: true");
Frontend
前端若要包含跨域請求的認證資訊 (如 cookies),則前端 Ajax call 得設定 withCredentials 屬性,JQuery為例:
$.ajax({
xhrFields: {
withCredentials: true
},
type: "GET",
url: "http://www.example.org/ajax.php"
}).done(function (data) {
console.log(data);
});
Preflighted requests
若請求非「Simple requests」則為 Preflighted requests,瀏覽器首先使用OPTIONS
方法向另一個來源的資源發送 HTTP 請求,以確定實際請求是否安全可發送。
Simple requests (參考條件) 不會觸發 CORS Preflighted requests