允许跨域资源共享（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解决跨域请求