react项目中axios post方法出现401错误

Question

所以，我必须在我用 React 编写的项目中添加一个产品到购物篮中。但是，当我在标头中发送访问令牌时，出现 401 错误。登录时，我在本地存储令牌，并且还创建了一个名为 useAxios 的组件。但我不知道如何使用它，某处有错误。端点都正常，所以没问题 有人可以解释一下问题是什么吗，提前谢谢。

import axios from "axios";
import { jwtDecode } from "jwt-decode";
import dayjs from "dayjs";
import { useContext } from "react";
import { AuthContext } from "../context/authContext";

export const baseURL = "XXX";

const useAxios = () => {
  const { authTokens, setUser, setAuthTokens } = useContext(AuthContext);

  const axiosInstance = axios.create({
    baseURL,
    headers: { Authorization: `Bearer ${authTokens?.access}` },
  });

  axiosInstance.interceptors.request.use(async (req) => {
    const user = jwtDecode(authTokens.access);
    const isExpired = dayjs.unix(user.exp).diff(dayjs()) < 1;

    if (!isExpired) return req;

    console.log(user);
    console.log(isExpired);

    const response = await axios.post(`${baseURL}/user/login/refresh/`, {
      refresh: authTokens.refresh,
    });
    localStorage.setItem("authTokens", JSON.stringify(response.data));
    localStorage.setItem("authTokens", JSON.stringify(response.data));

    setAuthTokens(response.data);
    setUser(jwtDecode(response.data.access));

    req.headers.Authorization = `Bearer ${response.data.access}`;
    return req;
  });

  return axiosInstance;
};

export default useAxios;

import axios from "axios";
import { jwtDecode } from "jwt-decode";
import { createContext, useEffect, useState } from "react";
import { Navigate, useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import { BASE_URL } from "../api/baseUrl";
export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [authTokens, setAuthTokens] = useState(
    localStorage.getItem("authTokens")
      ? JSON.parse(localStorage.getItem("authTokens"))
      : null
  );
  const [user, setUser] = useState(
    localStorage.getItem("authTokens")
      ? jwtDecode(localStorage.getItem("authTokens"))
      : null
  );

  // console.log(authTokens);
  // console.log(user);

  const [loading, setLoading] = useState(true);

  const registerUser = async (user) => {
    const response = await axios.post(`${BASE_URL}/user/register/`, user);
    console.log(response.data);
    console.log(response);
    return response;
  };

  const verifyOtp = async (otp_code, email) => {
    const response = await axios.post(`${BASE_URL}/user/verify_otp/`, {
      otp_code,
      email,
    });
    console.log(response.data);
    console.log(response);
    return response;
  };

  const resendOtp = async (email) => {
    const response = await axios.post(`${BASE_URL}/user/resend_otp/`, {
      email,
    });
    console.log(response.data);
    console.log(response);
    return response;
  };

  const confirmNewPassword = async (data) => {
    const response = await axios.post(`${BASE_URL}/user/reset_password/`, data);
    console.log(response.data);
    console.log(response);
    return response;
  };

  const loginUser = async (user) => {
    try {
      const response = await axios.post(`${BASE_URL}/user/login/`, user);
      console.log(response.data);
      if (response.status === 200) {
        console.log("Logged In");
        console.log(response);
        console.log(response.data);
        console.log(response.data.access);
        setAuthTokens(response.data);
        setUser(jwtDecode(response.data.access));
        localStorage.setItem("authTokens", JSON.stringify(response.data));
        return response.data;
      }
    } catch (error) {
      if (error.response.status === 404) {
        return false;
      } else {
        throw new Error("User not found or incorrect credentials");
      }
    }
  };

  let logoutUser = () => {
    setAuthTokens(null);
    setUser(null);
    localStorage.removeItem("authTokens");
    window.location.assign("/login");
  };

  const contextData = {
    user,
    setUser,
    authTokens,
    setAuthTokens,
    registerUser,
    loginUser,
    verifyOtp,
    logoutUser,
    resendOtp,
    // rstPassword,
    confirmNewPassword,
  };

  useEffect(() => {
    if (authTokens) {
      setUser(jwtDecode(authTokens.access));
    }
    setLoading(false);
  }, [authTokens, loading]);

  return (
    <AuthContext.Provider value={contextData}>
      {loading ? null : children}
    </AuthContext.Provider>
  );
};

import React from "react";
import blueHeartd from "../../assets/icons/blue-heart.svg";
import bag from "../../assets/icons/Bag-3.svg";
import heartOn from "../../assets/icons/heart-on.svg";
import "./style.scss";
import ReactPlayer from "react-player";
import axios from "axios";
import { BASE_URL } from "../../api/baseUrl";
import useAxios from "../../utils/useAxios";
const LastVideoCard = ({ product }) => {
  const axiosInstance = useAxios();
  const handleSubmitx = async (e) => {
    try {
      const response = await axiosInstance.post(`/order/basket/`);
      console.log(response);
      console.log(response.data);
      if (response.status === 201) {
        console.log("okey");
      } else {
        console.log(response.status);
        console.log("there was a server issue");
      }
    } catch (error) {
      let errorMessage = "An unknown error occurred";
      console.log(error);
    }
  };

  return (
    <>
      <div className="col-lg-4 p-3">
        <div className="videoCard">
          <div className="main">
            <ReactPlayer
              className="video"
              controls={true}
              url={product.product_video_type[0]?.video_url}
            />
          </div>
          <div className="heading">
            <h1>{product.user}</h1>
            <h6>
              <img src={blueHeartd} alt="" />
              {product.like_count}
            </h6>
          </div>
          <p>{product.name}</p>
          <div className="cardBottom">
            <span>$ {product.price}</span>
            <div className="icons">
              <img src={heartOn} alt="" onClick={handleSubmitx} />
              <img src={bag} alt="" />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default LastVideoCard;

Answer 1

看起来您没有在标头中发送令牌。您可以执行以下操作来解决 401 错误：

检查网络选项卡
在 Chrome/Brave/Edge/Firefox 或任何其他现代浏览器中，有一个 devTool 面板，您可以在其中找到“网络”选项卡，其中列出了所有网络请求。您可以在选项卡内找到您的 API 端点作为请求，检查它的标头。

如果您看到带有所需令牌的Cookies，则您的 Cookie 将进入请求标头。如果没有，请检查您的州。

检查状态
在大多数情况下，当您刷新时，浏览器不会保留本地或任何全局状态，因此您的所有状态都会根据您的规范变为默认值-d 或 null。

const axiosInstance = axios.create({
    baseURL,
    headers: { Authorization: `Bearer ${authTokens?.access}` },
  });

在调用此实例之前尝试

console.log(authTokens)

以确保您拥有访问令牌。

如果没有效果
如果以上都不起作用，请尝试使用默认导入的 axios

从 'axios' 导入 {axios}；

// ...
const {data} = await axios.get('/your-api-endpoint', {headers: {
      'Authorization': `Bearer ${authTokens?.access}`,
    });
// ...

希望这些有帮助！