使用fetch API时Authorization Header缺失问题求助

以下是针对你遇到的问题的具体排查方向和解决方案：

1. 预检请求（OPTIONS）的权限校验问题 #

浏览器在发送跨域POST请求时会先发送OPTIONS预检请求，默认不会携带Authorization头。如果你的服务器在预检阶段就校验这个头，就会返回"Missing Authorization Header"错误。而Postman不会触发预检请求，所以能正常通过。

• 解决：服务器端需调整配置：
  • 确保OPTIONS请求不校验Authorization头；
  • 配置Access-Control-Allow-Headers包含Authorization；
  • 若请求需要携带凭证，设置Access-Control-Allow-Credentials: true。

2. fetch未配置凭证携带 #

fetch API默认不会发送凭证类头信息（包括Authorization），需要显式指定credentials参数：
修改你的请求代码：

fetch("/api/projects", {
    method: "POST",
    credentials: 'include', // 跨域场景用include，同域用same-origin
    headers: {
        Authorization: `Bearer ${accessToken}`,
        "Content-Type": "application/json",
    },
    body: JSON.stringify(formData),
})

3. 头信息格式或拼写错误 #

再次确认：

• Authorization键名拼写正确（首字母大写，其余小写）；
• Bearer和令牌之间有且仅有一个空格；
• 令牌本身没有多余的空格或换行符。

4. 浏览器扩展拦截请求 #

部分隐私保护、广告拦截类浏览器扩展可能会自动移除Authorization头，尝试禁用所有扩展后重新测试。

5. 服务器中间件顺序错误 #

如果服务器端使用了CORS中间件，要确保它在权限校验中间件之前加载。如果CORS处理在权限校验之后，预检请求会被提前拦截，导致错误。

6. React代理配置问题 #

若你用了React的代理（比如package.json中的proxy字段或http-proxy-middleware），要确认代理转发时保留了Authorization头：

• 确保代理配置中设置了changeOrigin: true；
• 检查是否有自定义规则移除了请求头。

额外验证步骤 #

• 在浏览器Network面板中查看实际发送的请求头，确认Authorization确实被发送出去（代码中设置不代表浏览器最终会发送）；
• 对比Postman和浏览器的完整请求头，检查除Authorization外的其他字段（如Origin、Host）是否存在差异，服务器可能对这些字段有校验逻辑。

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