如何解决React+TypeScript中Axios请求401认证失败问题

你的代码里存在三个关键问题导致认证失败：

• 请求方法冲突：使用axios.get发起请求时，又在配置里指定method: "post"，这会导致请求方法混乱，若API要求GET请求则会触发401。
• Headers格式错误：axios的headers配置需用普通JS对象，而非浏览器原生Headers实例，否则axios无法正确解析请求头。
• Authorization字符串语法错误：Bearer token的字符串存在多余引号和换行，正确格式应为Bearer 你的token，无额外符号。

修正后的代码如下：

import React, { FC, useState, useEffect } from "react";
import axios from "axios";
import { IUser } from "../types/Types";
import List from "./List";
import UserItem from "./UserItem";

const HomePage: FC = () => {
  const [users, setUsers] = useState<IUser[]>([]);

  useEffect(() => {
    fetchUsers();
  }, []);

  async function fetchUsers() {
    try {
      const response = await axios.get<IUser[]>(
        "https://api.json-generator.com/templates/ZM1r0eic3XEy/data",
        {
          headers: {
            Authorization: 'Bearer wm3gg940gy0xek1ld98uaizhz83c6rh2sir9f9fu'
          }
        }
      );
      setUsers(response.data);
    } catch (e) {
      alert(e);
    }
  }

  return (
    <List
      items={users}
      renderItem={(user) => <UserItem user={user} key={user.id} />}
    />
  );
};

export default HomePage;

如果API实际需要POST请求，只需将axios.get改为axios.post，无需额外指定method字段（axios.post默认使用POST方法）。

内容的提问来源于stack exchange，提问作者Michael Hamar