如何从Express 5000端口向React 3000端口存储HttpOnly Cookie？

以下是针对你的跨端口（Express 5000/React 3000）Cookie存储失败问题的具体解决方案：

1. 配置Express的CORS中间件 #

跨域请求默认不会携带Cookie，必须在Express中明确开启凭据支持，并指定允许的源：

const cors = require('cors');
// 初始化Express app后添加
app.use(cors({
  origin: 'http://localhost:3000', // 必须是React开发服务器的完整地址，不能用*
  credentials: true // 允许跨域携带凭据（Cookie）
}));

2. 修正Cookie的配置参数 #

你的现有Cookie配置存在两个关键问题：

• 开发环境下secure: true会导致Cookie无法存储（仅HTTPS协议生效）
• 缺少domain和path属性，跨端口场景下需要明确指定共享范围

修改后的代码：

res.cookie('access_token', JSON.stringify(token), {
    secure: process.env.NODE_ENV === 'production', // 仅生产环境（HTTPS）开启secure
    httpOnly: true,
    expires: new Date(Date.now() + 60 * 24 * 3600000), // 修正过期时间计算（原代码少了一个0，实际仅2.4小时）
    domain: 'localhost', // 让localhost下的所有端口共享Cookie
    path: '/', // 确保Cookie在全站路由下可用
    sameSite: 'Lax' // 平衡安全性与跨域可用性，开发环境推荐使用
})
res.send('Cookie have been saved successfully');

3. React请求时携带凭据 #

在React的登录请求中，必须明确开启凭据携带：

• 若使用Axios：

import axios from 'axios';

axios.post('http://localhost:5000/login', yourLoginData, {
  withCredentials: true
})
.then(res => {
  // 处理响应
})

• 若使用Fetch API：

fetch('http://localhost:5000/login', {
  method: 'POST',
  credentials: 'include', // 携带Cookie
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(yourLoginData)
})
.then(res => res.text())
.then(data => {
  // 处理响应
})

4. 验证Cookie是否生效 #

登录请求完成后，打开浏览器开发者工具 → 切换到Application标签 → 展开Cookies → 查看localhost下的Cookie列表，此时应该能看到access_token条目。

注意：开发环境下请统一使用localhost作为域名，不要混用127.0.0.1，否则会导致domain不匹配，Cookie无法共享。

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