跨端口前后端分离场景下React如何获取Express-session会话ID Cookie

核心根因 #

前后端分属不同端口即属于跨源场景，浏览器默认的跨源安全策略会拦截第三方响应中的Set-Cookie字段，这不是express-session模块不支持前后端分离架构，只要从后端CORS配置、会话Cookie属性、前端请求凭证配置三个维度对齐策略，就能和同源场景一样正常存储、携带Cookie。

后端需要调整的配置 #

• 开启CORS跨域凭证支持
  跨源请求要允许读写Cookie，后端必须在CORS响应头中声明Access-Control-Allow-Credentials: true，否则浏览器会直接丢弃响应中的Set-Cookie字段。配置时注意origin字段必须填写明确的前端源地址，不能使用*通配符（带凭证的CORS请求不支持通配符源）。
  调整后的CORS配置示例：

  const corsOptions = {
    origin: 'http://localhost:3000',
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowedHeaders: ['Content-Type']
  }
  app.use(cors(corsOptions));
  

• 适配跨源场景的express-session Cookie配置
  默认的express-session Cookie属性不符合跨源要求，需要补充自定义配置：
  • cookie.secure：本地http开发环境设为false，线上https生产环境设为true，否则http场景下浏览器会直接丢弃未加密的Cookie
  • cookie.sameSite：本地开发环境设为'lax'即可满足跨端口请求要求；线上跨域名部署时设为'none'（必须配合secure: true使用，符合现代浏览器的安全规则）
  • 不要手动设置cookie.domain字段，默认会将Cookie绑定到后端服务的源地址，手动设置反而容易出现域名匹配错误
    调整后的session配置示例：

  app.use(session({
    secret: 'I am stuck, help me please!',
    store: store,
    saveUninitialized: true,
    resave: false,
    cookie: {
      secure: process.env.NODE_ENV === 'production',
      sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
      maxAge: 24 * 60 * 60 * 1000
    }
  }));
  

• 响应方法无影响
  使用res.json()返回响应完全可以正常携带Set-Cookie头，不需要更换其他响应方法。

前端请求需要调整的配置 #

默认的fetch()请求不会携带Cookie，也不会接收跨源响应中的Cookie，必须在请求配置中开启凭证支持：

fetch('http://localhost:3001/gimmecookie', {
    method: 'POST',
    credentials: 'include', // 核心缺失配置，允许跨域请求读写Cookie
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
    },
    body: JSON.stringify({ data: "data" })
})

常见踩坑说明 #

• 本地开发不需要使用真实IP替换localhost，Chrome对localhost环境的Cookie策略有特殊豁免，反而使用真实IP会因为非可信源触发更严格的跨域拦截。
• 不需要额外实现前后端握手流程，上述配置对齐后，浏览器会自动存储会话Cookie，并在后续所有跨域请求中自动携带Cookie，和同源场景的表现完全一致。
• 不建议使用手动写JS存储Cookie的临时方案，该方案需要移除会话Cookie的HttpOnly属性，会引入XSS攻击的安全风险，长期维护成本极高。

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