在登陆时为了安全 后端将 cookie 种在他的域名上，也导致联调时会出现的一些问题～

前端请求携带 cookie

  • Axios withCredentials = true
axios.create({
   withCredentials: true,
});
  • Fetch credentials = 'include'
fetch("url", {method: 'POST(GET)', credentials: "include"})

当然前端携带上 cookie 只是第一步，前提得需要后端正确的种上了 cookie，我们才可以携带

处理 Chrome SameSite 和 Secure

由于 Chrome 禁止了第三方 cookie 回导致上面的后端 cookie 前端是不会携带的。

sameSite 属性

  • Strict （完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie）
  • Lax （规则稍稍放宽，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。）
  • None （Chrome 计划将Lax变为默认设置。这时，网站可以选择显式关闭SameSite属性，将其设为None。不过，前提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效。）

所以后端需要设置 sameSite 为 None 并且 Secure 为 true 即可

// 下面的设置无效
Set-Cookie: widget_session=abc123; SameSite=None

// 下面的设置有效。
Set-Cookie: widget_session=abc123; SameSite=None; Secure

Access-Control-Allow-Origin 及 Access-Control-Allow-Credentials

在前端自动携带 cookie 时，后端 Access-Control-Allow-Credentials 需同为 true, 并且该属性要生效的话 Access-Control-Allow-Origin 的规则不能为 *