React中使用Fetch传递JWT时Authorization头丢失问题求助

核心问题排查方向及解决方案 #

1. 跨域（CORS）配置未允许自定义Authorization头

跨域请求中，浏览器会对包含自定义头的请求发送OPTIONS预检请求，如果后端未配置允许Authorization头，浏览器会过滤该头，导致中间件无法读取。

解决步骤：

• 使用cors包时，明确配置允许的请求头：

  const cors = require('cors');
  app.use(cors({
    origin: 'http://localhost:3000', // 替换为你的前端地址
    allowedHeaders: ['Content-Type', 'Authorization'], // 必须包含Authorization
    credentials: true
  }));
  

• 确保CORS中间件优先于所有路由和认证中间件加载，否则跨域头处理不及时会导致头丢失。

2. 认证中间件挂载顺序错误

如果认证中间件在CORS中间件之前加载，跨域请求的自定义头会被Node.js默认HTTP服务器过滤，导致中间件无法读取。

正确顺序示例：

// 1. 先处理CORS
app.use(cors(...));
// 2. 解析JSON请求体
app.use(express.json());
// 3. 再挂载认证中间件和受保护路由
app.use('/api/protected', authMiddleware, protectedRoutes);

3. 前端模板字符串语法错误（确认项）

你的前端代码中Authorization头使用了双引号，模板变量${token}不会被解析，需改为反引号：

'Authorization': `Bearer ${token}`, // 使用反引号包裹模板字符串

（注：你提到Network面板显示头存在，可能已修正，但仍建议确认）

4. 手动处理OPTIONS预检请求（未使用cors包时）

若未使用cors包，需手动响应OPTIONS请求并设置正确的头：

app.options('*', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.sendStatus(200);
});

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