在Axios创建的http实例中添加Bearer令牌请求头失效问题

我通过axios.create创建了带有基础请求头的全局http实例，可在应用各处调用该实例发送请求。但调用需Bearer令牌的受保护路由时，在React组件中通过post方法额外传入Authorization请求头却无法生效，相关代码如下：

全局http实例代码：

export const http = axios.create({
  baseURL: 'https://someurl/api',
  headers: {
    'Content-type': 'application/json',
    Accept: 'application/json',
  },
});

组件中尝试添加令牌的代码：

import {useContext} from 'react';
import {http} from 'src/helpers/HttpHelper';

const MyComponent = () => {
  const {userToken} = useContext(AuthContext);
  const signUpUser = () => {
    http
 .post(
   '/app_user_role_selection',
   {name: 'mishen'},
   {headers: {Authorization: `Bearer ${userToken}`}}
 )
 .then(res => console.log(res))
 .catch(error => console.log());
 }
 ...
}

以下是几种可行的解决方法：

• 手动合并全局与自定义请求头
  Axios默认会对请求头进行浅合并，但直接传入headers可能覆盖全局配置字段。可以手动将全局headers和自定义Authorization头合并后传入：

  const signUpUser = () => {
    http.post(
      '/app_user_role_selection',
      {name: 'mishen'},
      {
        headers: {
          ...http.defaults.headers,
          Authorization: `Bearer ${userToken}`
        }
      }
    )
    .then(res => console.log(res))
    .catch(error => console.log());
  }
  

• 使用请求拦截器自动添加令牌
  这是更优雅的方案，无需每次请求手动配置。在全局http实例中添加请求拦截器，自动为需要令牌的请求注入Authorization头：

  export const http = axios.create({
    baseURL: 'https://someurl/api',
    headers: {
      'Content-type': 'application/json',
      Accept: 'application/json',
    },
  });
  
  http.interceptors.request.use(
    (config) => {
      // 拦截器无法直接使用useContext，可从localStorage或全局变量获取token
      const userToken = localStorage.getItem('authToken');
      if (userToken) {
        config.headers.Authorization = `Bearer ${userToken}`;
      }
      return config;
    },
    (error) => Promise.reject(error)
  );
  

• 动态修改全局实例的默认请求头
  在组件中监听token变化，动态更新全局http实例的默认headers：

  import {useContext, useEffect} from 'react';
  import {http} from 'src/helpers/HttpHelper';
  
  const MyComponent = () => {
    const {userToken} = useContext(AuthContext);
  
    useEffect(() => {
      if (userToken) {
        http.defaults.headers.common['Authorization'] = `Bearer ${userToken}`;
      } else {
        // 无token时移除该请求头
        delete http.defaults.headers.common['Authorization'];
      }
    }, [userToken]);
  
    const signUpUser = () => {
      http.post('/app_user_role_selection', {name: 'mishen'})
        .then(res => console.log(res))
        .catch(error => console.log());
    }
    ...
  }
  

额外排查点 #

1. 确认userToken是否有效：请求前console.log(userToken)，检查是否为空或未正确获取。
2. 跨域配置检查：跨域场景下，后端需在响应头设置Access-Control-Allow-Headers: Authorization，否则浏览器会拦截自定义请求头。
3. 拦截器冲突检查：如果存在多个请求拦截器，确保后续拦截器未修改或移除Authorization头。

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