[JS][jQuery] AJAX Cross Domain Request – CORS | AJAX跨網域應用

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

Preflighted requests - MDN

若請求非「Simple requests」則為 Preflighted requests,瀏覽器首先使用OPTIONS方法向另一個來源的資源發送 HTTP 請求,以確定實際請求是否安全可發送。

Simple requests (參考條件) 不會觸發 CORS Preflighted requests

MDN diagram


References

Leave a Reply

Your email address will not be published. Required fields are marked *