React+Node/Express跨域部署时跨站session/cookie失效问题

核心问题根因 #

所有故障来自现代浏览器强制执行的跨站Cookie规则，以及现有配置的3个硬错误：

• sameSite: 'none' 配置下，secure 属性必须为true，这是Chrome 80+、Firefox、Safari全量生效的强制规则，无绕过空间。当前配置secure: false会被浏览器直接丢弃Set-Cookie响应头。本地localhost调试正常是因为浏览器给localhost做了特殊白名单豁免，自定义本地域名、线上跨域场景不享受该豁免，这也是本地映射anydomain.com测试失败的直接原因。
• 中间件加载顺序错误：CORS中间件必须在session、路由之前加载，否则跨域响应头、凭证允许标识无法正确附加到响应上，同样会被浏览器拦截。
• 缺失跨域凭证配套配置：CORS规则未开启凭证允许、前端请求未配置携带凭证时，跨域场景下Cookie既不会被写入，也不会在后续请求中携带。

分步修复方案 #

1. 修正Server.js中间件顺序与代理配置 #

反向代理（Nginx、CDN、云负载均衡）部署场景下必须开启trust proxy，同时调整中间件加载顺序，把CORS放到session之前：

//Server.js file
const dotenv = require('dotenv');
dotenv.config({ path: './config.env' });

const express = require('express');
const cookieParser = require('cookie-parser');

const serverInfo = require('./Info/ServerInfo');
const session = require('./Session/Session');
const cors = require('./Cors/Cors');
const routes = require('./Routes/Routes');

const app = express();

const Server = async () => {
    app.set('trust proxy', 1); // 反向代理场景必填，放在所有业务中间件最前
    app.use(express.json());
    app.use(express.urlencoded({ extended: true }));
    app.use(cookieParser());

    app.use(cors); // CORS必须在session、路由之前加载
    app.use(session);
    app.use(routes);

    app.listen(serverInfo.port, () => {
        console.log(`Server Is Running At Port ${serverInfo.port}`);
    });
}

module.exports.start = Server;

2. 修正Session.js的Cookie配置 #

sameSite: 'none' 必须搭配secure: true，建议显式设置Cookie有效期避免浏览器默认拦截：

//Session.js
const session = require('express-session');
const uuid = require('uuid');

const serverInfo = require('../Info/ServerInfo');

module.exports = session({
    secret: serverInfo.sessionKey,
    resave: false,
    saveUninitialized: false,
    cookie: {
        sameSite: 'none',
        httpOnly: true,
        secure: true, // sameSite:none下强制要求为true，无绕过方案
        maxAge: 7 * 24 * 60 * 60 * 1000 // 按需设置有效期，示例为7天
    },
    genid: (req) => uuid.v4()
});

3. 修正CORS配置 #

CORS配置禁止将origin设为通配符*，必须明确放行前端域名，同时开启凭证允许：

// Cors/Cors.js 正确配置示例
const cors = require('cors');
const allowList = [
    'https://domainA.com', // 线上前端域名
    'http://localhost:3000' // 本地开发前端地址
];
module.exports = cors({
    origin: (origin, cb) => {
        if (allowList.includes(origin) || !origin) return cb(null, true);
        return cb(new Error('CORS policy: origin not allowed'));
    },
    credentials: true // 核心配置，允许跨域请求携带凭证
});

4. 前端配套配置 #

所有发往后端domainB.com的请求必须开启携带凭证选项：

• 原生fetch请求添加配置项：

  fetch('https://domainB.com/api/xxx', {
      credentials: 'include'
      // 其余请求配置
  })
  

• axios请求可全局配置，也可单请求配置：

  // 全局配置
  import axios from 'axios';
  axios.defaults.withCredentials = true;
  

注意事项 #

• 线上后端必须部署HTTPS：secure: true的Cookie仅能在HTTPS协议下传输，HTTP环境下会被浏览器直接拦截，无绕过方案。
• 本地测试自定义域名时，可临时给本地服务配置自签名HTTPS证书，或通过浏览器Flags临时关闭同站Cookie限制做调试，该方式仅适用于本地测试，线上不可用。
• 不可将sameSite设置为lax或strict，这两个模式下跨站请求不会携带Cookie，无法满足跨域名部署需求。

内容的提问来源于stack exchange，提问作者Rana Muhammad Usama