后端设置的HttpOnly Cookie未在浏览器中生效求助

核心问题定位 #

你遇到的问题根源在于前端登录/登出请求未配置withCredentials: true，跨域场景下，浏览器默认不会处理响应的Set-Cookie头，必须显式开启该配置才能让浏览器保存Cookie。

具体排查与修复步骤 #

1. 补全前端请求的withCredentials配置 #

你的createPost方法已经正确添加了withCredentials: true，但login和logout请求缺失该配置，导致登录时浏览器收到Set-Cookie头却不存储。修改sessions.tsx中的代码：

import redaxios from 'redaxios';
import type { User } from '../index';

export async function login(params: {
  email: string;
  password: string;
}): Promise<User> {
  // 新增withCredentials配置
  const response = await redaxios.post("http://localhost:8888/login", params, {
    withCredentials: true
  });
  return response.data.data;
}

export async function logout() {
  // 新增withCredentials配置，注意post请求第二个参数为空对象（因为logout不需要请求体）
  const response = await redaxios.post("http://localhost:8888/logout", {}, {
    withCredentials: true
  });
  return response.data.data;
}

2. 验证后端CORS与Cookie配置（已正确，可确认） #

你的后端CORS配置已经开启credentials: true，且origin指定了前端的http://localhost:5173，Cookie的httpOnly、path、sameSite配置在本地开发场景下均无问题，无需修改。

3. 浏览器端额外检查 #

• 确认浏览器未禁用Cookie，未开启隐私/无痕模式（部分浏览器在隐私模式下会限制跨域Cookie存储）；
• 检查DevTools的Application > Cookies > http://localhost:8888，登录后刷新页面查看Cookie是否存在；
• 确认请求的域名/端口与后端Set-Cookie的domain（你未设置，默认是当前域名）匹配，本地localhost跨端口属于同一站点范畴，无需额外配置domain。

验证方法 #

修改后重新发起登录请求，查看：

1. Network面板中登录请求的响应头Set-Cookie是否正常；
2. Application面板的Cookie存储中是否出现token字段，且值不为undefined；
3. 调用createPost等需要认证的接口时，请求头是否自动携带Cookie: token=xxx（可在Network面板查看）。

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