跨域cookie携带问题总结

背景

我们知道很多场景，都需要前端请求带上cookie，例如用户鉴权、登陆校验等。而有些场景下，我们会发现请求不会带上cookie，这是为什么呢？

概念

cookie是种在域名下的信息。只有请求同域且同站的请求，才能携带cookie。

首先，我们需要了解，跨站（cross-site）和跨域（cross-origin）是两个概念：

1. 同站指：只要两个 URL 的 eTLD+1 相同即可（有效顶级域名+二级域名），不需要考虑协议和端口

2. 同源指：协议/主机名/端口完全一致

浏览器的默认配置same-site:Lax，意味着部分cookie允许跨站请求携带，需同时满足以下条件：

1. 顶级导航链接，如a标签（iframe不行）

2. GET、HEAD请求（POST不行）

Secure: 只有HTTPS请求才会带cookie

HttpOnly: 客户端无法读取和修改cookie。

跨域能否携带cookie？

理论上，我们解决跨域问题无非是两种方式：

1. 直接请求跨域域名，前端设置withCredentials，然后后端设置CORS请求头来允许跨域。

2. 通过后端代理的方式，先访问同域名的后端服务，然后在后端转发到其他服务。

第一种方法，在same-site:Lax的情况下，是无法携带跨站cookie的。

第二种方法，可以携带cookie。

解决方案

1. 通过设置浏览器中的same-site: None；和HttpOnly: true，来实现跨站的cookie携带。但是这种方法基本只能解决本地调试问题，线上不可能通过这种方法。

2. 通过代理的方式携带cookie。推荐使用这种方案。