Axios请求中API未接收到Authorization令牌问题求助

问题核心 #

你API端收到的是浏览器CORS预检OPTIONS请求，而非实际的POST请求。当浏览器发起跨域请求且携带Authorization这类非标准HTTP头时，会自动先发送OPTIONS预检请求，验证服务器是否允许该跨域请求。只有预检通过，浏览器才会发送带Authorization头的实际请求。

具体解决步骤 #

1. 确保API服务器正确处理OPTIONS预检请求

服务器需要返回以下关键响应头，否则浏览器会拦截后续的实际请求：

• Access-Control-Allow-Origin：必须设置为请求的Origin值（不能用*，因为携带Authorization头时不允许通配符）
• Access-Control-Allow-Methods：需包含实际请求使用的方法（比如你的场景是POST）
• Access-Control-Allow-Headers：必须明确列出请求中携带的自定义头，包括Authorization、Content-Type、Accept-Language
• Access-Control-Max-Age：可选，设置预检响应的缓存时长，减少重复预检请求
• 预检请求需返回200或204状态码，不能返回404/500等错误

以Node.js Express为例，处理OPTIONS请求的代码示例：

app.options('*', (req, res) => {
  const allowedOrigin = req.headers.origin;
  // 也可以配置为指定的允许源列表，比如 ['http://xxx.xxx.xx.x:xxxxx']
  res.setHeader('Access-Control-Allow-Origin', allowedOrigin);
  res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Authorization, Content-Type, Accept-Language');
  res.setHeader('Access-Control-Max-Age', '86400'); // 缓存1天
  res.sendStatus(204);
});

2. 验证Axios请求配置的有效性

• 确认token.accessToken.jwtToken存在有效值，发送前可通过console.log(token.accessToken.jwtToken)检查是否为空或undefined
• 确保请求的method参数确实为POST（从预检请求的access-control-request-method字段来看应该是，但需二次确认）
• 如果请求需要携带凭证（如Cookie），需在Axios配置中添加withCredentials: true

3. 排查浏览器端的请求状态

• 打开浏览器开发者工具的Network面板，查看是否有实际的POST请求发送：如果预检失败，浏览器会直接终止后续请求，此时控制台会输出CORS相关错误提示
• 检查控制台的错误信息，浏览器会明确指出预检失败的原因（比如Access-Control-Allow-Headers未包含Authorization）

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