Axios拦截器返回401未授权错误，Bearer Token为null问题求助

调用登出API时，用Fetch能正常完成请求，但使用Axios时，请求头里的Bearer Token始终为null，导致接口返回401 Unauthorized错误。登出前已完成登录操作，localStorage中确实存在有效的token。

登出函数代码 #

let logoutUser = async () => {

  // let response = await fetch(`http://127.0.0.1:8000/api/logout/`, {
  //   method: "POST",
  //   headers: {
  //     Authorization: "Bearer " + authToken,
  //   },
  // });
  let response = await api.post("/logout");
};

Axios实例及拦截器代码 #

let authToken = localStorage.getItem("authToken") || null;
export const api = axios.create({
  baseURL: endPoint,
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${authToken}`,
  },
});

api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("authToken");
    if (token) {
      config.headers["Authorization"] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

登录函数代码 #

let loginUser = async (e) => {
  e.preventDefault();

  let response = await auth().post("/login", { email: "rahil.eliyev@gmail.com", password: "123456" });
  if (response.status === 200) {
    setauthToken(response.data.token);
    setUser(response.data);
    localStorage.setItem("authToken", JSON.stringify(response.data.token));
    navigate("/");
  } else {
    alert("Something went wrong");
  }
};

问题原因及解决方法 #

核心原因 #

登录时存储token用了JSON.stringify()，但拦截器里直接取出token拼接，导致实际发送的Token是带双引号的字符串（比如"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."），后端无法识别该格式的Token，判定为无效，因此返回401。而Fetch使用的是状态管理中的authToken（原始未序列化的token值），所以能正常工作。

解决方案（二选一即可） #

1. 修改登录代码，去掉不必要的序列化
   token本身就是字符串类型，不需要用JSON.stringify()处理，直接存储原始值：

// 登录函数中修改存储token的代码
localStorage.setItem("authToken", response.data.token);

2. 修改拦截器代码，解析存储的token
   如果必须保留序列化存储的逻辑，拦截器中取出token后先解析：

api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("authToken");
    if (token) {
      const parsedToken = JSON.parse(token);
      config.headers["Authorization"] = `Bearer ${parsedToken}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

推荐第一种方案，避免后续因序列化/反序列化带来的额外问题。

内容的提问来源于stack exchange，提问作者Rahil Əliyev