React中Axios携带Bearer Token请求返回401未授权问题

以下是针对你遇到问题的具体排查方向和解决方案：

1. 优先排查Vite代理配置不匹配问题 #

你的Axios baseURL 是 https://xyz.abc.com，但Vite配置中 server.proxy 设置的是 https://pixinvent.com/，两个域名不匹配导致请求不走代理，触发浏览器跨域限制——浏览器会拦截跨域请求的Authorization头，或预检请求未通过，最终返回401。而Postman不受跨域策略限制，所以请求正常。

修正代理配置： #

修改 vite.config.js 中的代理规则，匹配你的API域名：

server: {
  port: 3000,
  proxy: {
    // 匹配所有API请求路径（根据实际接口前缀调整）
    '/api': {
      target: 'https://xyz.abc.com',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '') // 若接口无/api前缀则去掉此规则
    }
  },
  cors: {
    origin: ["http://localhost:3000"],
    methods: ["GET", "PATCH", "PUT", "POST", "DELETE", "OPTIONS"],
    allowedHeaders: ["Content-Type", "Authorization", "X-Requested-With"],
  },
},

同时修改Axios的baseURL为代理前缀：

export const axios = Axios.create({
  baseURL: '/api', // 对应代理配置的前缀
});

2. 验证Token的正确性与获取逻辑 #

在Axios拦截器中添加日志，确认Token是否正确获取并设置到请求头：

axios.interceptors.request.use((config) => {
  const token = localStorage.getItem("accessToken");
  console.log("当前Token:", token); // 检查是否与Postman中使用的Token一致
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
    // 无需强制设置Content-Type，Axios会根据请求数据自动适配
    // config.headers["Content-Type"] = "application/json";
  }
  console.log("最终请求头:", config.headers); // 确认Authorization字段存在且格式正确
  return config;
});

• 若Token为空：检查accessToken是否正确存入localStorage
• 若Token格式错误：确保没有多余引号、空格，与Postman中的Token完全一致

3. 处理预检请求（OPTIONS）的头信息问题 #

浏览器跨域请求会先发OPTIONS预检，部分后端要求预检请求也携带Authorization头。修改拦截器，确保所有请求（包括OPTIONS）都带上Token：

axios.interceptors.request.use((config) => {
  const token = localStorage.getItem("accessToken");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

4. 确认Axios实例导入与使用正确性 #

检查 App.js 中Axios实例的导入方式：

• 若Axios配置文件中是命名导出（export const axios），当前导入{ axios } from "@lib/axios"是正确的
• 若为默认导出（export default axios），需改为import axios from "@lib/axios"

5. 绕过拦截器直接测试请求 #

在getAllData中手动添加请求头，排除拦截器的问题：

const getAllData = async () => {
  try {
    const token = localStorage.getItem("accessToken");
    const res = await axios(`/data`, {
      headers: {
        Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json'
      }
    });
    console.log(res);
  } catch (error) {
    console.log(error);
  }
};

若此方式请求成功，说明拦截器存在逻辑错误，需重新检查拦截器代码。

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