由 Credentials 引起的cors跨域问题

Access-Control-Allow-Credentials首先介绍一下Access-Control-Allow-Credentials这个响应头字段：Access-Control-Allow-Credentials,标志是否允许客户端请求携带Credentials(凭证)。Credentials可以是 cookies, authorization headers 或 TLS client..

衣乌安、

14769人浏览 · 2020-03-31 19:40:30

衣乌安、 · 2020-03-31 19:40:30 发布

Access-Control-Allow-Credentials

首先介绍一下Access-Control-Allow-Credentials这个响应头字段：

Access-Control-Allow-Credentials,标志是否允许客户端请求携带Credentials(凭证)。Credentials可以是 cookies, authorization headers 或 TLS client certificates.(一般可能携带cookies的情况比较多)。该响应头只能是true或者不设置！

当作为对预检请求（Option请求）的响应的一部分时，它指示是否可以使用Credentials(凭证)进行实际请求。请注意，简单的GET请求是没有预检的，所以若一个对资源的请求带了Credentials，如果这个响应头(Access-Control-Allow-Credentials)没有随资源返回，响应就会被浏览器忽视，不会返回到web内容，预检请求也会因此抛出不能通过预检的error。

需知

Access-Control-Allow-Credentials头工作中与XMLHttpRequest.withCredentials 或Fetch API中的Request() 构造器中的credentials 选项结合使用。Credentials必须在前后端都被配置（即the Access-Control-Allow-Credentials header 和 XHR 或Fetch request中都要配置）才能使带credentials的CORS请求成功. 必需请求和response header都支持！！!

使用方式

XHR 使用 Credentials

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true); 
xhr.withCredentials = true;  // 设置withCredentials为true
xhr.send(null);

JQ 使用 Credentials

使用的话则设置withCredentials为true不使用则为false,MDN中明确指出withCredentials默认值为false,但是根据阮一峰的一篇相关文章中评论似乎实际情况中默认值不生效，

$.ajax({
    type:"POST",
    url: 'http://example.com/',
    data: {},
    xhrFields: {
        withCredentials: true // 设置withCredentials为true
    },
    crossDomain: true,
    dataType: 'json',
    success: successHandler
});

fetch 使用 Credentials

fetch控制Credentials的选项有三个：

请求时携带凭证：credentials: 'include'
仅在同源时请求时携带凭证：credentials: 'same-origin'(浏览器默认值,在旧版本浏览器，例如safari 11依旧是omit，safari 12已更改)
不在请求中包含凭证，credentials: 'omit'

fetch(url, {
  credentials: 'include'  
})

response header

Access-Control-Allow-Credentials: true

注意

要注意，当设置了 Access-Control-Allow-Credentials 为 true 时，Access-Control-Allow-Origin 不能为*,也是出于一种安全策略，比如：在cookie中存取的是用户的登录信息，又不限制客户端的请求来源，他人获取到cookie以后则可随意发起请求，登录该用户账号，损害用户权益