React中Axios登出请求401未授权，Rest Client却正常

核心问题 #

你的Axios post 请求参数传错了——headers被错误地放在了请求体的位置，导致后端无法获取到Authorization令牌，因此返回401未授权。

Axios的post方法签名是：

axios.post(url[, data[, config]])

其中headers属于config对象，是第三个参数，而非第二个参数（请求体data）的一部分。

修正后的代码 #

import axios from "axios";
import { useNavigate } from "react-router";

const Logout = () => {
  const navigate = useNavigate();
    
  if (!localStorage.getItem("token")) navigate("/login");

  const logout = () => {
    // 将headers放到第三个参数（config）中
    axios.post(
      "http://localhost:8000/api/auth/logout",
      {}, // 登出接口通常无需请求体，传空对象占位
      {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
          Authorization: `Bearer ${localStorage.getItem("token")}`
        }
      }
    ).then((res) => {
      localStorage.clear();
      navigate("/login");
    }).catch((err) => {
      console.log(err);
    })
  }

  return (
    <div>
      <button onClick={logout}>LOGOUT</button>
    </div>
  );
}

export default Logout;

补充说明 #

• Rest Client能成功是因为插件正确将Authorization头放在了请求头区域，而非请求体中。
• 截图对应信息：
  • localStorage中已正确存储token值
  • Rest Client请求的Headers中正确携带了Bearer令牌，请求返回成功
  • Axios请求的Payload中包含了headers对象（而非请求头），导致后端未识别到授权信息，返回401错误

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