Axios未保存会话Cookie：React+Express鉴权401问题求助

以下是针对你遇到的跨域Session鉴权失效问题的具体修复步骤：

1. 动态配置Cookie的Secure属性 #

你的Session Cookie设置了secure: true，但该属性仅在HTTPS环境下才会被浏览器保存。如果本地开发使用HTTP协议，浏览器会直接拒绝保存这个Cookie。修改Session配置，根据环境动态设置Secure：

const sessionOptions = {
  secret: tokenSecret,
  keys: [tokenSecret],
  resave: false,
  saveUninitialized: false,
  cookie: {
    secure: NODE_ENV === 'production', // 生产环境才启用secure
    httpOnly: true,
    sameSite: NODE_ENV === 'production' ? 'none' : 'lax',
    maxAge: 3600000,
  },
};

2. 调整SameSite属性的兼容性 #

SameSite: 'none'必须配合secure: true使用，且部分旧浏览器对该值支持不佳。本地开发时（同一域名不同端口的跨域场景），设置为lax即可满足Cookie携带需求，避免兼容性问题。

3. 修正中间件顺序 #

CORS中间件必须放在Session中间件之前，否则浏览器的OPTIONS预检请求无法被正确处理，导致后续请求无法携带Cookie。调整后端代码顺序：

// 先加载CORS中间件
const corsOptions = {
  credentials: true,
  origin: NODE_ENV === 'production' ? PRO_URL : LOCAL_URL,
};
app.use(cors(corsOptions));

// 再加载日志和Session中间件
app.use(morgan('dev'));
app.use(session(sessionOptions));

4. 正确配置Trust Proxy #

生产环境中如果后端部署在反向代理（如Nginx、Vercel、Heroku）之后，需要开启信任代理，确保后端能正确识别请求的HTTPS状态，从而正确处理Secure Cookie：

if (NODE_ENV === 'production') {
  app.set('trust proxy', 1);
}

5. 验证CORS Origin的精确性 #

确保PRO_URL和LOCAL_URL是前端应用的精确地址（如https://your-app.com或http://localhost:3000），不能使用通配符*，因为带credentials: true的CORS请求不允许通配符Origin。

6. 前端调试确认Cookie状态 #

在浏览器开发者工具的Application > Cookies > 后端域名下，检查是否存在Session对应的Cookie（通常名为connect.sid）：

• 如果Cookie不存在：检查Secure/SameSite配置、CORS Origin是否匹配
• 如果Cookie存在：查看其属性是否符合预期（如Secure在生产环境为true，SameSite正确）

7. 确认登录接口正确设置Session #

确保登录接口在验证用户身份后，正确初始化Session：

app.post('/login', async (req, res) => {
  // 用户验证逻辑...
  req.session.isAuth = true;
  res.status(200).json({ message: '登录成功' });
});

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