Next.js 13.4从Node.js API获取Cookie失败问题求助

核心问题定位 #

你遇到的Cookie不显示问题，本质是跨域请求的Cookie传递规则限制导致的——Postman会自动处理Cookie，但浏览器出于安全策略，需要前后端同时配置才能让跨域请求正常接收并保存Cookie。

代码中的遗漏配置 #

1. 后端CORS配置缺失关键参数 #

当前后端仅启用基础CORS，未明确允许跨域携带凭证：

app.use(cors());

跨域场景下要传递Cookie，必须指定允许的前端域名并开启凭证支持，否则浏览器会阻止Cookie写入。

修改后端CORS配置：

// 根据实际环境调整前端地址，开发环境通常是http://localhost:3000
const allowedOrigins = process.env.NODE_ENV === 'development' 
  ? ['http://localhost:3000'] 
  : ['你的生产环境前端域名'];

app.use(cors({
  origin: allowedOrigins,
  credentials: true // 允许跨域请求携带凭证（Cookie）
}));

2. 前端Axios请求未开启凭证携带 #

当前前端请求未设置withCredentials: true，导致浏览器不会将后端返回的Cookie保存到当前域名下。

修改前端登录请求代码：

const res = await axios.post(SIGNIN_URL, values, {
  withCredentials: true // 开启凭证携带，允许接收并保存Cookie
});

3. 补充：Cookie配置细节优化 #

当前maxAge单位设置有误（Express的maxAge要求毫秒单位，你写的86400是秒），会导致Cookie立即过期，建议修正：

res.cookie("jwt", token, {
  httpOnly: true,
  secure: process.env.SERVER_ENVIRONMENT !== "development",
  sameSite: "strict",
  maxAge: 86400 * 1000, // 修正为24小时对应的毫秒数
});

验证步骤 #

1. 重启后端服务确保配置生效
2. 前端重新发起登录请求
3. 打开DevTools的Application > Cookies，检查是否存在jwt Cookie

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