跨域的 set-cookie 规则，以及 set-cookie 的一些限制

前端

2024-01-25 16:29:35

跨域的 set-cookie 规则

在跨域环境中，set-cookie 头部用于在客户端浏览器中设置 cookie。跨域请求需要遵循以下规则：

简单请求不需要 CORS 头部： 如果跨域请求是简单请求（例如，GET、HEAD、POST），则它不需要包含 CORS 头部。浏览器会自动发送请求并处理响应，包括设置 cookie。
复杂请求需要 CORS 头部： 如果跨域请求是复杂请求（例如，PUT、DELETE、OPTIONS），则它必须包含 CORS 头部。服务器端必须明确允许该请求并设置适当的 CORS 头部，包括 Access-Control-Allow-Credentials 头部。
with-credentials 选项： 在跨域请求中，可以通过设置 with-credentials 选项来允许包含凭据（例如，cookie）。如果未设置该选项，则不会发送 cookie。

set-cookie 的限制

除了跨域规则外，set-cookie 头部还受到以下限制：

不能设置 HttpOnly cookie： 跨域请求中设置的 cookie 不能是 HttpOnly cookie。这是因为 HttpOnly cookie 不能通过脚本访问，因此无法在跨域请求中使用。
不能设置 Secure cookie： 跨域请求中设置的 cookie 不能是 Secure cookie。这是因为 Secure cookie 只能通过 HTTPS 连接发送，而跨域请求可能使用 HTTP 连接。
不能设置 SameSite=None cookie： 跨域请求中设置的 cookie 不能是 SameSite=None cookie。这是因为 SameSite=None cookie 要求发送方和接收方的网站都使用 HTTPS 连接。

实际示例

下面是一个跨域请求中设置 cookie 的实际示例：

// 前端代码
fetch('https://example.com/api/set-cookie', {
  method: 'POST',
  credentials: 'include'
});

// 后端代码
const res = await fetch('https://example.com/api/set-cookie', {
  method: 'POST',
  headers: {
    'Access-Control-Allow-Credentials': true,
    'Set-Cookie': 'myCookie=value'
  }
});