Express后端无法接收fetch请求携带的Authorization授权头如何解决？

问题原因 #

你在调用fetch方法时，将自定义请求头直接写在了配置对象的根层级，没有按照fetch API的要求放到专门的headers属性中，浏览器不会识别并发送根层级下的头字段，这是导致Authorization头丢失的核心原因。
Postman能正常获取请求头是因为Postman不遵循浏览器端的fetch API配置规则，也没有CORS限制，只要你配置了对应头就会正常发送。

修复后的前端代码 #

useEffect(()=>{
    fetch(`${API}/${userId}/courses`,{
        method:"GET",
        // 头字段必须放到headers属性下
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        }
    }).then(response=>{
        return response.json();
    }).then(data=>{
        console.log(data)
    })
// 记得添加useEffect依赖数组，避免无限触发请求
}, [userId, token])

其他可能的排查点 #

如果修正配置后仍然拿不到Authorization头，可以检查跨域（CORS）相关配置：

• 你的前后端端口不同属于跨域请求，浏览器会先发送OPTIONS预检请求，你需要在Express后端配置Access-Control-Allow-Headers响应头，明确允许Authorization字段，同时配置Access-Control-Allow-Origin允许前端域名访问。
• 不要在GET请求中携带Content-Type: application/json头，GET请求没有请求体，这个头属于不必要配置，可能会触发额外的预检逻辑。

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