同域下JavaScript fetch POST请求未设置Cookie致跳转请求异常

首先一眼就能揪出问题核心：你的POST请求是跨域的，浏览器的同源策略直接阻止了存储响应里的Cookie。

看你贴的POST请求详情里的origin头：

origin: https://support/membership/friends

而请求的目标Host是example.com，这俩域名完全不匹配（协议、主域都不一样），属于标准的跨域请求。按照浏览器的安全规则，跨域响应返回的Set-Cookie默认不会被存储——这就是为什么跳转后的GET请求根本没携带sessionId=abc-123，服务器只能生成新的sessionId=xyz-789。

具体修复步骤 #

1. 先确认：请求是否本该是同域？ #

如果你的页面和API确实部署在同一个域（example.com）下，那要排查这几点：

• 发起请求的页面是不是真的在example.com？如果是，那大概率是你在fetch请求里手动设置了错误的origin头，删掉这个手动配置就行。
• 检查fetch的目标URL有没有拼写错误，是不是真的指向https://example.com/api/v1/frobnicate，别不小心混了域名。

2. 如果确实是跨域场景（页面在support/membership/friends，API在example.com） #

那得同时调整前端fetch配置和后端API的CORS规则：

前端fetch配置

发起POST请求时，必须加上credentials: 'include'选项，告诉浏览器允许跨域携带并接收Cookie：

fetch('https://example.com/api/v1/frobnicate', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: /* 你的请求体内容 */,
  credentials: 'include' // 这是关键配置
})

后端API的CORS响应头配置

服务器必须返回以下两个响应头，明确允许跨域携带Cookie：

• Access-Control-Allow-Origin: https://support/membership/friends（必须指定具体源，不能用*）
• Access-Control-Allow-Credentials: true

另外补充下：你Set-Cookie里的secure和HttpOnly是合理的——secure要求HTTPS环境（你的请求都是HTTPS，没问题）；HttpOnly只是限制JS读取Cookie，不影响浏览器自动存储和携带，所以这俩不是问题。

等你修复origin问题或者配置好CORS后，浏览器就会正常存储POST响应的sessionId=abc-123，跳转后的GET请求也会自动携带这个Cookie，服务器就不会生成新会话了。

内容的提问来源于stack exchange，提问作者ironchicken