React+Express项目localhost无法保存Cookie问题求助

先排查最容易忽略的细节：端口是否选对 #

Chrome的Cookie是绑定到域名+端口的，若你的React应用运行在localhost:3000，后端Express服务在localhost:5000，那后端设置的Cookie会归属到localhost:5000的域名空间下。别在DevTools的Application>Cookies里盯着前端的localhost:3000找，切换到后端对应的端口再查看。

跨域配置必须两端匹配 #

如果前后端属于跨域部署（端口/域名不同），缺了任意一端的配置，浏览器都会直接忽略Set-Cookie头：

• 后端Express配置：使用cors中间件时，必须指定具体的前端origin（不能用通配符*），同时开启credentials：

  const cors = require('cors');
  app.use(cors({
    origin: 'http://localhost:3000', // 你的React应用地址
    credentials: true
  }));
  

• 前端fetch请求：必须添加credentials: 'include'参数——跨域场景下，没有这个参数浏览器不会保存后端返回的Cookie，哪怕是登录请求也需要加：

  fetch('http://localhost:5000/login', {
    method: 'POST',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username: 'xxx', password: 'xxx' })
  })
  

Cookie属性配置要适配运行环境 #

如果用express-session生成Cookie，注意以下属性设置：

• 本地开发用HTTP协议时，不要添加Secure属性（该属性仅在HTTPS环境生效）；
• SameSite属性：本地开发设为Lax即可，线上HTTPS环境可以设为None并配合Secure（避免跨域场景下Cookie被拦截）。示例配置：

  app.use(session({
    secret: 'your-own-secret-key',
    resave: false,
    saveUninitialized: false,
    cookie: {
      httpOnly: true, // 该属性仅禁止JS读取Cookie，不影响DevTools查看
      sameSite: 'Lax',
      maxAge: 24 * 60 * 60 * 1000 // 按需设置Cookie有效期
    }
  }));
  

验证流程 #

1. 发送登录请求后，打开DevTools的Network标签，找到/login请求，确认Response Headers里的Set-Cookie头存在且格式正确；
2. 切换到Application>Cookies面板，选择后端对应的端口，检查connect.sid是否存在。

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