将解决疑问点:

  1. 能否设置或读取子域的cookie?
  2. 客户端与服务端设置的 cookie 有什么区别?
  3. 同域或跨域如何携带 cookie 带的是谁的 cookie?

能否设置或读取子域的cookie?

不行,只能向当前域或更高级的域设置 cookie

例如 client.com 不能向 a.client.com 设置 cookie,而两者相反则可以,读取亦同上。

客户端与服务端设置的 cookie 有什么区别?

无论是客户端还是服务端都只能向自己的域或者更高级的域设置 cookie,例如 client.com 不能向 server.com 设置 cookie,
反向同理。

服务端可以设置 httpOnly: true,且拥有该属性值时 前端无法通过 js 去获取。

客户端只会携带与请求同域的cookie,例如 client.com/getList 就带上 domainclient.com 的 cookie,
server.com/getList 就带上 domainserver.com 的 cookie

默认情况下,跨域的请求不携带 cookie,则引出下面疑问

同域或跨域如何携带 cookie 带的是谁的 cookie?

这个问题与发送请求的方式有关

跨域携带 cookie 的前提是需要服务端设置 Access-Control-Allow-Credentials: true ,否则会收到浏览器的拦截

fetch 在默认情况下是不携带任何 cookie 无论同域或者跨域,只有设置了 credentials: include 时会携带该请求所在 域下的 cookie

fetch(url, {
    credentials: "include", // include, same-origin, omit
})
  • include: 跨域ajax带上cookie
  • same-origin: 仅同域ajax带上cookie
  • omit: 任何情况都不带cookie

ajax 请求在同域下是默认携带 cookie,跨域需设置 withCredentials

axios.get('http://server.com', {withCredentials: true})

原文 https://juejin.cn/post/6844903648384778247