容許跨域資源共享（CORS）攜帶 Cookie （轉載）

如何讓CORS攜帶Cookie

---

 

CORS 是一個 W3C 標準，全稱是「跨域資源共享」（Cross-origin resource sharing）。
默認瀏覽器爲了安全，遵循「同源策略」，不容許 Ajax 跨域訪問資源，而爲了容許這種操做，服務器端和客戶端都要遵循一些約定。
服務器端需設置如下響應頭：

Access-Control-Allow-Origin: <origin> | * // 受權的訪問源 
Access-Control-Max-Age: <delta-seconds> // 預檢受權的有效期，單位：秒 
Access-Control-Allow-Credentials: true | false // 是否容許攜帶 
Cookie Access-Control-Allow-Methods: <method>[, <method>]* // 容許的請求動詞 
Access-Control-Allow-Headers: <field-name>[, <field-name>]* // 額外容許攜帶的請求頭 
Access-Control-Expose-Headers: <field-name>[, <field-name>]* // 額外容許訪問的響應頭

咱們看到，Access-Control-Allow-Credentials 響應頭會使瀏覽器容許在 Ajax 訪問時攜帶 Cookie。其對應了ASP.NET Core的以下中間件設置：

app.UseCors(builder => builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials());

 

此外在客戶端瀏覽器中，咱們仍然須要對 XMLHttpRequest 設置其 withCredentials 參數，才能實現攜帶 Cookie 的目標。示例代碼以下：

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

注意，爲了安全，標準裏不容許 Access-Control-Allow-Origin: *，必須指定明確的、與請求網頁一致的域名。同時，Cookie 依然遵循「同源策略」，只有用目標服務器域名設置的 Cookie 纔會上傳，並且使用 document.cookie 也沒法讀取目標服務器域名下的 Cookie。

 

 

如何讓Jquery的AJAX使用CORS時攜帶Cookie

---

 

跨域請求想要帶上cookies必須在請求頭裏面加上xhrFields: {withCredentials: true}設置。

$.ajax({
    url: "http://localhost:8080/orders",
    type: "GET",
    xhrFields: { withCredentials: true },
    success: function (data) {
        render(data);
    }
});

 

 

參考文獻：

容許跨域資源共享（CORS）攜帶 Cookie

Jquery Ajax設置withCredentials解決跨域請求