本地环境Set-Cookie存在但浏览器未保存Cookie问题求助

1. 前端请求必须携带凭证配置 #

不管你用axios还是fetch，必须显式开启凭证携带，否则浏览器会忽略响应的Set-Cookie头：

axios 示例（React TS） #

import axios from 'axios';

// 全局配置（所有请求生效）
axios.defaults.withCredentials = true;

// 或单个登录请求配置
const login = async (loginData: { username: string; password: string }) => {
  const response = await axios.post('http://localhost:3000/api/login', loginData, {
    withCredentials: true
  });
  return response.data;
};

fetch 示例（React TS） #

const login = async (loginData: { username: string; password: string }) => {
  const response = await fetch('http://localhost:3000/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(loginData),
    credentials: 'include' // 关键配置
  });
  return response.json();
};

2. 修正后端Cookie配置 #

你的Cookie配置存在几个潜在问题，调整如下：

• 统一maxAge与JWT的expiresIn时长（当前JWT设为1小时，maxAge对应设为3600000毫秒）
• 开发环境无需强制secure，合理设置SameSite避免跨域拦截
• 可去掉domain让浏览器自动绑定当前域名（含端口），避免跨端口匹配问题

修改后的设置代码：

const token = jwt.sign({ user: user.id }, JWTsecret, { expiresIn: "1h" })

console.log("Generated token: ", token)
res.cookie("user", token, {
  httpOnly: true,
  path: "/",
  maxAge: 3600000, // 与JWT过期时间保持一致
  sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax',
  secure: process.env.NODE_ENV === 'production' // 生产环境需HTTPS，开启secure
})
res.status(200).json(user)

3. 检查浏览器隐私设置 #

确保浏览器允许保存Cookie：

• Chrome：设置 → 隐私和安全性 → Cookie及其他网站数据 → 选择"允许所有Cookie"（开发环境临时使用，生产环境可按需调整）
• 避免使用无痕模式，无痕模式下默认会限制第三方Cookie存储

4. 验证跨域配置一致性 #

后端CORS的origin已设为http://localhost:5173，需确保前端请求的域名和端口完全匹配，不要用127.0.0.1代替localhost，否则域名不匹配会导致Cookie无法存储。

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