使用JWT Token发起POST请求时Axios报TypeError：Authorization设置失败

问题根源 #

1. axios配置拼写错误：你在axios.create中使用了错误的属性名baseUrl，axios官方要求的正确属性名是baseURL（大写U）。这个拼写错误会导致axios无法正确初始化实例，进而引发headers结构异常。
2. headers属性访问不安全：直接访问config.headers.common时，若config.headers或config.headers.common未被初始化，就会触发"Cannot set properties of undefined"的错误。

修正后的代码 #

import axios from 'axios';
import { getToken } from '../auth';

export const Base_url = 'http://localhost:8080';

// 修正baseUrl为baseURL
export const myAxios = axios.create({
  baseURL: Base_url,
});

// 修正baseUrl为baseURL，同时优化拦截器的headers处理
export const privateAxios = axios.create({
  baseURL: Base_url,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
  },
});

privateAxios.interceptors.request.use(
  (config) => {
    const token = getToken();
    console.log(token);
    if (token) {
      // 先确保headers对象存在，再直接设置Authorization头
      config.headers = config.headers || {};
      config.headers.Authorization = `Bearer ${token}`;
      console.log(config);
    }
    return config;
  },
  (error) => Promise.reject(error)
);

额外说明 #

• 直接设置config.headers.Authorization比通过common更稳妥，axios会自动处理该头在不同请求方法中的应用。
• 若你仍想使用common，需先确保该子对象存在：

  config.headers.common = config.headers.common || {};
  config.headers.common.Authorization = `Bearer ${token}`;
  

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