跨域请求携带cookie需同时满足以下三个条件：

1. 跨域：CORS
2. 权限：set-cookie时的same-site
3. 声明：withCredentails: true

跨域

cors方式可以解决跨域问题，关键点：

1. options预检请求的发送条件与处理
2. response header的设置

cookie权限：

（涉及cookies时，是否携带主要取决于是否跨站）

该cookie在set-cookie时same-site的配置：

1. Strict ，所有跨站请求都不发送cookies

2. Lax(default) ，大部分跨站请求不发送cookies.

请求类型	示例	正常情况	Lax
链接	<a href="..."></a>	发送 Cookie	发送 Cookie
预加载	<link rel="prerender" href="..."/>	发送 Cookie	发送 Cookie
GET 表单	<form method="GET" action="...">	发送 Cookie	发送 Cookie
POST 表单	<form method="POST" action="...">	发送 Cookie	不发送
iframe	<iframe src="..."></iframe>	发送 Cookie	不发送
AJAX	$.get("...")	发送 Cookie	不发送
Image	<img src="...">	发送 Cookie	不发送

（摘自www.ruanyifeng.com/blog/2019/0…）

3. None , 允许跨站发送。（必须同时设置Secure）也就是说必须在https协议下才允许跨站发送cookie

💡 跨站一定跨域、跨域不一定跨站

---

相关细节

预检请求

判断条件：

💡 以下两个条件全部满足会则**不会**发送预检请求，否则发送

• 请求方法是以下三种方法之一：

  • HEAD
  • GET
  • POST

• HTTP的头信息不超出以下几种字段：

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

预检请求的Response header：

1. Access-Control-Allow-Origin
2. Access-Control-Allow-Methods
3. Access-Control-Allow-Headers
4. Access-Control-Allow-Credentials
5. Access-Control-Max-Age

正常跨域请求

request header

浏览器自动添加origin字段

response header

1. Access-Control-Allow-Origin：允许的域

2. Access-Control-Allow-Credentials：是否允许携带cookies

   1. 为true时Access-Control-Allow-Origin不能设置为*

3. Access-Control-Expose-Headers：允许客户端拿到response中的哪些header

---

背后的思考：

跨域主要会带来一些安全问题，如果用户在某个网站登陆后，访问别的网站就可以携带已登陆的网站的cookies进行一些危险操作。

1. 获取用户信息，
2. 危险操作
3. 获取用户浏览痕迹（在A站放入B站的图片，B站可以根据请求cookie得知某个用户浏览了哪个网页）

防御措施：

1. HttpOnly：禁止script读取cookie

   1. 防止xss窃取cookie

2. Secure：必须通过https发送

3. SameSite：跨站禁止发送cookie

所以最好不要跨域

• 生产环境应当使用代理避免跨域