React中如何访问express-session生成的Cookie？跨域配置后仍失败

本质认知误区 #

• 默认配置下express-session生成的会话Cookie带有httpOnly: true属性，这个属性会直接禁止所有前端JS脚本（包括js-cookie、universal-cookie这类库）读取Cookie内容，设计初衷是防范XSS攻击窃取会话凭证。
• 你当前配置的Axios.defaults.withCredentials = true、后端CORS的credentials: true，作用是保障跨域请求时浏览器能自动把存储的Cookie带给后端、后端允许带凭证的跨域请求，这两个配置和“前端能不能通过JS读取Cookie”没有任何关联。

配置中可直接导致读取失败的常见错误点 #

• Cookie有效期配置错误：你当前写的cookie.expires: 60 * 60 * 24存在单位误用。express-session的expires参数如果传入数字，代表从1970年1月1日开始计算的毫秒时间戳，你传入的86400实际对应1970年1月1日00:01:24，相当于Cookie生成时就已经过期，浏览器根本不会存储，自然无法读取。
• 缺少跨域场景必需的SameSite配置：你没有显式设置cookie的sameSite属性，现代Chrome、Edge浏览器的默认值为sameSite: 'lax'，在前后端分域名部署的跨站点场景下，这个默认值会阻止浏览器存储跨域响应的Cookie，哪怕开了凭证跨域配置也不生效。
• saveUninitialized配置的影响：你当前设置saveUninitialized: false，意味着只有当请求中对req.session做了修改（比如给session挂载用户ID、登录状态等自定义属性）时，后端才会返回带Set-Cookie的响应头。如果你测试的接口没有对session做任何写入操作，后端根本不会生成会话Cookie返回给浏览器，自然无法读取。
• httpOnly配置的认知偏差：如果你的目标只是让后端能通过会话识别用户，完全不需要让前端JS读取Cookie的具体值，此时必须保留httpOnly: true的默认安全配置；只有存在特殊业务需求需要前端JS读取Cookie时，才需要主动将httpOnly设为false，但这会大幅提升会话被XSS窃取的风险，不推荐生产环境使用。

正确的跨域会话交互配置参考 #

后端session配置修正 #

app.use(session({
  key: "userId",
  secret: "subscribe",
  resave: false,
  saveUninitialized: false,
  cookie: {
    maxAge: 24 * 60 * 60 * 1000, // 用maxAge按当前时间计算24小时有效期，避免时间戳计算错误
    httpOnly: true, // 生产环境必须开启，保障会话安全
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax', // 本地同站点开发用lax即可，线上跨站点部署需设为none
    secure: process.env.NODE_ENV === 'production' // 线上环境必须搭配HTTPS开启secure属性
  },
}))

后端CORS配置修正 #

不要硬编码origin值，按请求源动态返回匹配结果，避免跨域预检失败：

app.use(cors({
  origin: (origin, callback) => {
    if (origin === "http://localhost:3000") return callback(null, true)
    callback(new Error('当前源不允许跨域访问'))
  },
  methods: ["GET", "POST"],
  credentials: true,
}));

前端交互说明 #

• 保留你已配置的Axios.defaults.withCredentials = true，浏览器会在所有跨域请求中自动携带存储的会话Cookie，后端可直接通过req.session识别用户登录状态，全程不需要前端手动读取Cookie的具体值。
• 仅在有特殊业务需求时，再主动将后端cookie的httpOnly设为false，此时前端的js-cookie、universal-cookie库才能正常读取到对应Cookie值。

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