最新cookie跨域解决方法
开篇前,需要先了解一下cros机制:
简介:CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
跨域资源:各种资源请求,比如页面的css,js文件,或者XMLHttpRequest请求;
请求类型:简单类型,非简单类型;
简单跨域:
(1) 请求方法是以下三种方法之一:HEAD,GET,POST
(2)HTTP的头信息不超出以下几种字段:AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
这个时候,一般在满足服务器以下设置,都是可以正确返回请求的
Access-Control-Allow-Origin:http://api.bob.com
Access-Control-Allow-Credentials:true
Access-Control-Expose-Headers:FooBar
Content-Type:text/html; charset=utf-8
另外注意:CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器,一方面要服务器同意,还需指定Access-Control-Allow-Credentials字段。
非简单请求:
多一个步骤,先发送预检请求(option),预检请求通过之后,以后每次浏览器正常的CORS请求,就都跟简单请求一样,会有一个Origin头信息字段。服务器的回应,也都会有一个Access-Control-Allow-Origin头信息字段
下面就是今天的重点cookie,跨域设置。

我现在在做的一个项目是通过cookie进行保存用户登录信息的。
cookie有很多好处,但也有很多限制。今天想记录以下其中cookie中的一个domain属性;
domain属性,是用来限制cookie的可使用范围,来保证信息安全。如自己开发的A域名页面的用户信息,B域名页面取不到。
但需求千变万化,总有产品需求要求开发做到B或C域名页面拿到A域名的cookie。浏览器也帮我们想到了这个可能,所以在XMLHttpRequest对象里有个withCredentials属性,值为true,时就可跨域取值。
以下是从MDN摘抄的withCredentials的定义。
XMLHttpRequest.withCredentials 属性是一个Boolean类型,它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制(cross-site Access-Control)请求。在同一个站点下使用withCredentials属性是无效的。
但是!!这些都不是重点!
我最近更新了chrome版本至v80.*.*, 发现withCredentials居然没用了。跨域请求里cookie已经拿不到了。(PS:其他浏览器正常)

查了半天,找到了chrome80版本的声明

大致就是说80以后的版本,cookie默认不可跨域,除非服务器在响应头里再设置same-site属性为none(捂脸),和secure属性。
same-site有3种值可以设置:strict,lax,none
其他2种就不介绍了。只说none,大概如下这样:
