Vite React与Node.js中JWT Token无法存入浏览器Cookie问题

1. 修正Cookie的Domain配置 #

你的res.cookie里domain设置为'127.0.0.1:5173'是错误的——Domain字段不包含端口号，正确设置应为前端页面所在域名（不带端口）：

res.cookie("token", token, {
    maxAge: 3600000 * 24 * 30 * 3,
    httpOnly: true,
    domain: '127.0.0.1', // 去掉端口
    sameSite: 'Lax', // 可根据需求调整
});

如果前端使用localhost:5173，则将domain改为'localhost'，确保与前端域名完全匹配。

2. 前端请求必须显式携带凭证 #

浏览器跨域请求不会自动携带Cookie，需手动开启凭证：

• 若使用fetch：

fetch('/api/signup', {
    method: 'POST',
    credentials: 'include', // 关键配置：携带Cookie
    body: JSON.stringify(yourData),
    headers: {
        'Content-Type': 'application/json',
    }
});

• 若使用axios：

axios.post('/api/signup', yourData, {
    withCredentials: true // 关键配置：携带Cookie
});

3. 保持CORS配置与前端域名一致 #

如果前端切换过域名（比如从127.0.0.1改为localhost），CORS的origin必须同步修改，确保与前端页面地址完全匹配：

// 前端用localhost:5173时
app.use(cors({ origin: 'http://localhost:5173', credentials: true }));
// 前端用127.0.0.1:5173时
app.use(cors({ origin: 'http://127.0.0.1:5173', credentials: true }));

4. 注意SameSite与Secure属性的搭配 #

• 本地HTTP环境下不能设置secure: true，该属性仅在HTTPS协议下生效，强行设置会导致Cookie无法写入。
• 跨域（含同域名不同端口）场景下，sameSite建议设为'Lax'（默认值）；若需跨站点携带Cookie，可设为'None'，但必须配合secure: true（仅适用于HTTPS环境）。

5. 验证Cookie写入状态 #

打开浏览器开发者工具（F12），在Application > Cookies下查看对应域名的Cookie列表：

• 若未找到Cookie，检查控制台是否存在Cookie拦截提示。
• 确认Cookie的Domain、Path等属性与当前页面匹配。

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