已返回Set-Cookie头但浏览器未设置Cookie问题求助

你的情况是跨域请求下后端返回的Set-Cookie未被浏览器存储，核心问题集中在Cookie属性配置和前端请求参数错误两个方面，具体如下：

1. 前端请求的credentials参数位置错误 #

你当前把Credentials写在了headers里，这是错误的——credentials是fetch API的顶层配置选项，不属于请求头。而且参数名需要小写开头，浏览器会忽略headers里的这个字段，导致跨域时不会处理Cookie的存储与携带。

修改后的前端请求代码：

const response = await fetch("http://localhost:8080/login", {
   method: "POST",
   headers: {
       "Content-Type": "application/json",
   },
   credentials: 'include', // 移到顶层配置，小写开头
   body: JSON.stringify(postData),
});

2. Cookie的Secure属性与localhost的HTTP环境冲突 #

你给Cookie设置了Secure属性，该属性要求Cookie只能通过HTTPS协议传输，但你的服务运行在http://localhost的HTTP环境下，浏览器会直接忽略带有Secure属性的Cookie。

同时，SameSite=None必须搭配Secure属性使用，所以本地开发的HTTP环境下需要调整配置：

• 本地开发时，将SameSite设为Lax或Strict，同时关闭Secure属性
• 生产环境HTTPS部署时，再恢复SameSite=None与Secure的组合

修改后的后端Set-Cookie代码：

// 本地开发环境配置
c.SetSameSite(http.SameSiteLaxMode)
// 倒数第二个参数设为false，禁用Secure属性
c.SetCookie("session", session, 3600, "/", "localhost", false, true)

3. 额外验证点 #

你的后端CORS配置中AllowCredentials已经设为true，这是跨域下允许Cookie传递的必要条件，这部分无需修改。

按照以上步骤调整后，浏览器应该能正常存储后端返回的session Cookie了。

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