React中如何用axios发起携带Bearer Token的GET请求

核心错误原因 #

你遇到的请求失败90%概率是两个问题：第一是给axios.get传配置的位置错误，第二是修改全局axios配置不会生效到你独立创建的apiClient实例上，另外还有小概率是Bearer格式拼接错误、localStorage取token的key写错。

第一步：修正http-common.js封装（推荐统一处理鉴权，避免每个接口重复写） #

直接在封装的axios实例上加请求拦截器，自动给所有请求注入鉴权头，一劳永逸：

import axios from "axios";

const apiClient = axios.create({
  baseURL: "http://localhost:8080/api",
  headers: {
    "Content-type": "application/json"
  }
});

// 请求拦截器：发起请求前自动附加token
apiClient.interceptors.request.use((config) => {
  // 注意替换成你项目中存储token的实际key名
  const token = localStorage.getItem("accessToken");
  if (token) {
    // 注意：Bearer 后面必须跟一个半角空格，漏写会导致后端无法识别鉴权头
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default apiClient;

第二步：页面中发起GET请求的正确写法 #

注意axios.get的方法签名是get(url, config)，配置对象必须放在第二个参数位置，放到第三个参数会完全不生效：

import apiClient from "../common/http-common.js"; // 替换为你项目的实际文件路径
import { useEffect, useState } from "react";

export default function Account() {
  const [list, setList] = useState([]);

  useEffect(() => {
    const getAccountList = async () => {
      try {
        // 拦截器已经自动加了鉴权头，这里直接调用即可
        const { data } = await apiClient.get("/account/all");
        setList(data);
      } catch (err) {
        // 调试时打印错误和实际请求头，快速定位问题
        console.error("请求失败：", err);
        console.log("实际发出的请求头：", err.config.headers);
      }
    };
    getAccountList();
  }, []);

  return (
    <div>
      {/* 渲染账户列表逻辑 */}
    </div>
  )
}

单请求临时附加Token的写法 #

如果不想用拦截器统一处理，单个接口加头的写法如下，同样注意参数位置：

const token = localStorage.getItem("accessToken");
const { data } = await apiClient.get("/account/all", {
  headers: {
    Authorization: `Bearer ${token}`
  }
});

排查清单 #

• 确认localStorage取token的key和存储时的key完全一致，避免取到null
• 确认Bearer和token值之间有半角空格，不要写成Bearer${token}
• 不要尝试修改axios全局配置给独立创建的apiClient实例加头，实例配置是隔离的，全局配置不会生效
• 如果控制台报CORS错误，需要后端配置允许Authorization请求头，你用curl可以正常访问的话基本可以排除这个问题

内容的提问来源于stack exchange，提问作者Đỗ Như Vỹ