Authorization请求头在CORS跨域请求中失效问题求助

我来帮你梳理下问题所在，你的CORS配置有几个关键疏漏，导致浏览器在预检请求后没有正确携带Authorization头：

核心问题分析 #

1. Access-Control-Allow-Origin 配置错误
   你现在设置的res.setHeader('Access-Control-Allow-Origin', req.host)是把允许的源设成了API自身的主机名（api.example.com），但实际前端的请求源是example.com。当使用withCredentials: true时，这个头必须明确匹配前端的真实源，不能用通配符，也不能指向API自己的域名。

2. 缺少 Access-Control-Allow-Credentials 头
   因为你在fetch里开启了withCredentials: true，浏览器要求后端必须显式返回Access-Control-Allow-Credentials: true，否则会拒绝携带任何凭证（包括Authorization头）的跨域请求。

3. Access-Control-Allow-Headers 覆盖不全
   虽然你的Content-Type属于简单请求类型，但预检请求会检查所有自定义头的允许情况。当前你只允许了Authorization，建议把前端用到的Content-Type也加入列表，避免浏览器因为头不被允许而拦截请求。

修正后的后端中间件代码 #

module.exports = function (req, res, next){
  // 方式1：固定允许指定源（更安全）
  // const allowedOrigin = 'https://example.com';
  
  // 方式2：动态允许请求源（适合多源场景，建议加白名单校验）
  const allowedOrigin = req.headers.origin;
  // 可选白名单校验示例：
  // const allowedOrigins = ['https://example.com', 'https://www.example.com'];
  // if (!allowedOrigins.includes(allowedOrigin)) {
  //   return res.status(403).send('Origin not allowed');
  // }

  res.setHeader('Access-Control-Allow-Origin', allowedOrigin);
  res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  // 包含前端所有用到的请求头
  res.setHeader('Access-Control-Allow-Headers', 'Authorization, Content-Type');
  // 必须开启这个头才能支持withCredentials
  res.setHeader('Access-Control-Allow-Credentials', 'true');

  if(req.method === 'OPTIONS'){
    // 预检请求直接返回200状态，无需执行后续逻辑
    return res.sendStatus(200);
  }
  next();
}

额外注意事项 #

• 前端代码本身没有明显问题，但要确认accessToken变量是有效的字符串，且generalInfo.url.api确实指向api.example.com。
• 动态允许Origin时一定要加白名单校验，否则会带来安全风险，允许任意源跨域请求你的API。

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