ExpressJS打印req.cookies返回空对象的常见问题排查

核心问题根因 #

• 浏览器默认拦截跨域请求的Cookie携带逻辑
  浏览器的同源安全策略规定，跨域发起的fetch请求默认的credentials配置为same-origin，即只有请求地址和当前页面的源协议、端口、域名完全一致时，才会自动在请求头中附带当前域下的Cookie。当前前端页面和localhost:5000端口的Express服务属于跨域关系，浏览器默认会过滤掉Cookie请求头，哪怕通过document.cookie能读取到本地Cookie内容，也不会把这些内容随请求发送到服务端。
• Express默认的CORS配置不支持跨域凭证传输
  你当前使用的是无参数默认配置的app.use(cors())，该配置会默认返回Access-Control-Allow-Credentials: false响应头，且允许源设置为通配符*。这种配置下，哪怕客户端手动修改请求携带凭证，浏览器也会直接拦截跨域响应，不允许Cookie类的私有凭证跨域传输。

分步修复方案 #

1. 客户端调整fetch请求参数 #

显式开启跨域请求的凭证携带能力：

const login = async () => {
  const resp = await fetch("http://localhost:5000", {
    method: "POST",
    // 新增该配置，强制请求携带跨域凭证
    credentials: "include",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({msg: "example"}),
  });
};

2. 服务端调整CORS配置 #

将默认CORS配置替换为支持跨域凭证的规则，注意禁止使用通配符源：

// 替换原有的app.use(cors())代码
app.use(cors({
  // 填写你实际运行前端页面的源地址，例如http://localhost:3000
  origin: "你的前端页面实际访问地址",
  // 显式告知浏览器允许跨域携带Cookie凭证
  credentials: true
}))

补充注意事项 #

• CORS开启credentials: true后，响应头的允许源绝对不能设置为*，这是浏览器的强制安全限制，否则请求会被直接拦截。
• 如果本地存储的Cookie没有设置Domain属性，默认只会绑定在前端页面的当前域下，这类Cookie天然不会被发送到其他域的后端服务，需要确保目标Cookie的Domain属性匹配后端服务的域名规则。
• 本地开发环境下如果遇到Chrome的SameSite策略拦截Cookie，可临时将Cookie的SameSite属性设置为None并搭配Secure标记，生产环境需要严格校验Cookie的安全属性避免CSRF风险。

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