React调用API时Bearer Token未出现在请求头的问题排查

你这里的核心问题是Axios的post方法参数结构理解错了，导致你传入的请求头没有被正确识别。

Axios的post方法签名是这样的：

axios.post(url[, data[, config]])

第三个参数是一个配置对象，headers只是这个对象里的一个属性，而不是直接把headers对象作为第三个参数传递。

修正你的Services.post方法 #

把你的Services.post改成下面这样，将headers放到config对象里：

export const Services = {
    post: (url: string, body: IKeyValuePairs<any> = {}, headers: IKeyValuePairs<string> = {}): AxiosPromise => {
        // 这里要把headers放到config的headers属性中
        return axios.post(url, body, { headers });
    },
}

验证你的调用逻辑 #

你的请求头设置部分是没问题的，只要确保localStorage.getItem('accessToken')能正确获取到非空的token值。调用Services.post的方式也不需要改，因为你已经把contentTypeHeader作为第三个参数传进去了，修正后的方法会正确把它放到config的headers里。

额外排查点 #

如果修正后还是没看到Authorization头，可以检查这几点：

• 确认token不是null或undefined，可以在控制台打印contentTypeHeader看看具体值
• 如果是跨域请求，确保后端配置了Access-Control-Allow-Headers包含Authorization，否则浏览器可能会在预检请求后移除这个头
• 检查是否有Axios拦截器不小心覆盖或删除了请求头

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