Express.js跨域301跳转后客户端未获取Cookie问题排查

根因分析 #

直接访问http://localhost:3001/user/login时，请求属于同域（服务端端口3001），浏览器会正常处理Set-Cookie响应头；但从3000端口的React页面点击链接跳转时，属于跨域请求场景，此时Cookie缺少跨域所需的必要属性，且服务端未配置跨域凭证支持，导致浏览器拒绝保存Cookie。

解决方案 #

1. 调整服务端Set-Cookie属性

修改服务端的响应头配置，添加跨域Cookie必需的属性：

const token = jwt.sign({ broadcasterId: user.twitchId }, process.env.JWT_SECRET);

// 开发环境HTTP下用SameSite=Lax（SameSite=None需配合HTTPS的Secure属性，HTTP环境浏览器会拦截）
// 生产环境必须切换为SameSite=None; Secure（需部署HTTPS）
const cookieOptions = `jwt=${token}; HttpOnly; SameSite=Lax; Domain=.localhost`;

res.writeHead(301, {
    "Location": "http://localhost:3000",
    "Set-Cookie": [cookieOptions],
});
res.end();

• SameSite=Lax/None：允许跨域场景下传递Cookie，适配不同环境的浏览器规则。
• Domain=.localhost：让Cookie在localhost的所有端口下共享。
• HttpOnly：保留原有配置，避免XSS攻击窃取Cookie。

2. 服务端配置CORS支持凭证

安装并启用Express的CORS中间件，允许指定源并开启凭证支持：

const cors = require('cors');
const express = require('express');
const app = express();

// 配置CORS，允许3000端口的请求携带凭证
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true,
  optionsSuccessStatus: 200
}));

// 后续路由逻辑...

3. 验证调整效果

修改完成后，从React页面点击登录链接跳转，浏览器会在重定向回3000端口后正确保存JWT Cookie。

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