express-session在CORS跨域客户端域名下无法存储Cookie问题求助

配置错误点 #

• cookie.domain配置完全错误：Set-Cookie的domain属性用于指定哪个域名可以接收该cookie，只能填写纯域名（不能带协议、端口号），且必须和设置cookie的服务端域名匹配。你服务端运行在localhost，却给cookie配置domain为http://127.0.0.1:3000，浏览器会直接拒收该cookie。
• 跨域场景缺少必要的cookie属性：127.0.0.1和localhost属于完全不同的源，跨域场景下必须将sameSite设置为none，否则浏览器会限制第三方cookie存储；同时sameSite: none要求搭配secure: true（仅HTTPS环境生效，本地HTTP调试时可临时关闭该规则，若客户端是HTTPS域名则服务端必须也使用HTTPS）。
• CORS配置冗余错误：Access-Control-Allow-Headers不需要填写Set-Cookie，该字段是响应头，不属于允许的请求头范围。
• session根级domain配置冗余：根级的domain是cookie.domain的别名，不需要重复配置。
• 前端请求未开启凭证携带：无论你使用axios还是fetch发起请求，都需要主动开启withCredentials: true（axios）或credentials: 'include'（fetch），否则浏览器不会处理跨域响应的Set-Cookie头。

修正后的服务端代码 #

const express = require("express");
const session = require("express-session");
//...

const app = express();

app.use((req, res, next) => {
  // 实际生产环境建议按白名单校验origin，不要写死
  res.setHeader(
    "Access-Control-Allow-Origin",
    "http://127.0.0.1:3000"
  );
  res.setHeader("Access-Control-Allow-Credentials", true);
  res.setHeader("Access-Control-Allow-Methods", "OPTIONS, GET, POST, PUT, DELETE, PATCH");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Content-Type, Authorization"
  );
  // 预检请求直接返回200
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});


app.use(
  session({
    secret: "my secret",
    resave: false,
    saveUninitialized: false,
    store: sessionStore,  //mongoDB session store
    cookie: {
      // 本地调试http场景可省略domain，或填写localhost，不要带协议和端口
      // 若生产环境部署在二级域名下，可填写如.example.com
      sameSite: "none",
      // 本地http调试时注释secure，客户端为HTTPS域名时必须开启，且服务端要使用HTTPS
      secure: true,
      httpOnly: true,
      maxAge: 300 * 1000,
    },
  })
);

//...
//server hosted on localhost:8000

额外注意事项 #

• 若客户端使用HTTPS域名，服务端必须也使用HTTPS协议，否则secure: true无法生效，cookie会被浏览器拒收。
• 本地调试时如果同时需要兼容localhost和127.0.0.1的客户端，可省略cookie.domain配置，浏览器会自动匹配设置cookie的服务端域名。

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