React应用Axios获取会话失败——GET请求Token发送异常

问题描述 #

我正在开发一个React应用，目标是为已登录用户获取会话列表。该功能在Postman中调用生产API测试完全正常，但前端连接API时，获取会话的GET请求执行异常，排查后问题集中在MessageList组件，推测是访问Token未正确获取或发送，可能存在Token发送错误或无效的情况。

相关文件 #

1. AxiosDefaults #

// src/api/axiosDefaults.js

import axios from "axios";

axios.defaults.baseURL = "https://odyssey-api-f3455553b29d.herokuapp.com/";
axios.defaults.headers.post["Content-Type"] = "multipart/form-data";
axios.defaults.withCredentials = true;

export const axiosReq = axios.create();
export const axiosRes = axios.create();

2. CurrentUserContext #

该文件可实现用户成功登录

// src/contexts/CurrentUserContext.js

import { createContext, useContext, useEffect, useMemo, useState } from "react";
import axios from "axios";
import { axiosReq, axiosRes } from "../api/axiosDefaults";
import { useHistory } from "react-router";
import { removeTokenTimestamp, shouldRefreshToken } from "../utils/utils";

export const CurrentUserContext = createContext();
export const SetCurrentUserContext = createContext();

export const useCurrentUser = () => useContext(CurrentUserContext);
export const useSetCurrentUser = () => useContext(SetCurrentUserContext);

export const CurrentUserProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);
  const history = useHistory();

  const handleMount = async () => {
    try {
      const { data } = await axiosRes.get("dj-rest-auth/user/");
      setCurrentUser(data);
      console.log('Current user data:', data); // PASS. Current user data: { pk: 13, username: "user1", email: "", first_name: "", last_name: "", ... }
    } catch (err) {
      console.error('Failed to fetch current user data:', err); // Not registering
    }
  };

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

  useMemo(() => {
    axiosReq.interceptors.request.use(
      async (config) => {
        if (shouldRefreshToken()) {
          try {
            const response = await axios.post("/dj-rest-auth/token/refresh/");
            console.log('Token refreshed:', response.data); // PASS. Token refreshed: { access: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...', ... }
          } catch (err) {
            setCurrentUser((prevCurrentUser) => {
              if (prevCurrentUser) {
                history.push("/signin");
              }
              return null;
            });
            removeTokenTimestamp();
            return config;
          }
        }
        return config;
      },
      (err) => {
        return Promise.reject(err);
      }
    );

    axiosRes.interceptors.response.use(
      (response) => response,
      async (err) => {
        if (err.response?.status === 401) {
          try {
            const response = await axios.post("/dj-rest-auth/token/refresh/");
            console.log('Token refreshed after 401:', response.data); // Token refreshed after 401: { access: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...', ... }
          } catch (err) {
            setCurrentUser((prevCurrentUser) => {
              if (prevCurrentUser) {
                history.push("/signin");
              }
              return null;
            });
            removeTokenTimestamp();
          }
          return axios(err.config);
        }
        return Promise.reject(err);
      }
    );
  }, [history]);

  return (
    <CurrentUserContext.Provider value={currentUser}>
      <SetCurrentUserContext.Provider value={setCurrentUser}>
        {children}
      </SetCurrentUserContext.Provider>
    </CurrentUserContext.Provider>
  );
};

3. MessageList #

尝试通过GET请求https://odyssey-api-f3455553b29d.herokuapp.com/conversations/?Authorization=eyJ0eXAiOiJ....获取数组[{"id": 15,"username": "user3" }, {"id": 14,"username": "user2"},{"id": 16,"username": "user4"}]，该请求已通过Postman成功实现（先POST登录信息到https://odyssey-api-f3455553b29d.herokuapp.com/dj-rest-auth/login/，请求体为{"username": "user1","password": "*****"}）。注意以下未触发的console.log：

// pages/messaging/MessageList.js


import React, { useEffect, useState, useContext } from 'react';
import { axiosReq } from '../../api/axiosDefaults';
import { CurrentUserContext } from '../../contexts/CurrentUserContext';

const MessageList = () => {
  const [conversations, setConversations] = useState([]);
  const { currentUser } = useContext(CurrentUserContext);

  useEffect(() => {
    const fetchConversations = async () => {
      if (!currentUser || !currentUser.token) {
        console.error('Token is missing or current user is not set'); // Not registering
        return;
      }

      console.log('Current user (MessageList):', currentUser); // FAIL. Not registering
      console.log('Current user token (MessageList):', currentUser.token); // FAIL. Not registering

      try {
        const response = await axiosReq.get('/conversations/', {
          headers: {
            Authorization: `Token ${currentUser.token}`,
            'Content-Type': 'application/json', // Specify Content-Type for this request
          },
        });
        console.log('Fetched conversations:', response.data); // FAIL. Not registering
        setConversations(response.data);
      } catch (error) {
        console.error('Failed to fetch conversations:', error); // FAIL. Not registering
      }
    };

    if (currentUser && currentUser.token) {
      console.log('Fetching conversations...'); // FAIL. Not registering
      fetchConversations();
    } else {
      console.log('Current user or token is missing:', currentUser); // Current user or token is missing: undefined
    }
  }, [currentUser]);

  console.log('Conversations state:', conversations); // Conversations state: []

  return (
    <div>
      <h1>Conversations</h1>
      <ul>
        {conversations.length > 0 ? (
          conversations.map((conversation) => (
            <li key={conversation.id}>{conversation.username}</li>
          ))
        ) : (
          <p>No conversations found.</p>
        )}
      </ul>
    </div>
  );
};

export default MessageList;

已执行的调试步骤 #

• 验证GET请求URL正确，与Postman中成功请求一致。
• 验证登录后通过Postman可成功获取Token及会话列表：[{"id": 15,"username": "user3" }, {"id": 14,"username": "user2"},{"id": 16,"username": "user4"}]。
• 添加大量console.log检查当前用户及Token是否正确设置：
  • console.log('Current user data:', data);可正常输出用户数据：{ pk: 13, username: "user1", email: "", first_name: "", last_name: "", ... }
  • MessageList中以下日志可正常输出：
    • console.log ('Current user:', currentUser);输出：Object { pk: 13, username: "user1", email: "", first_name: "", last_name: "", ... }
    • console.log('Current user token:', currentUser.token);输出Token信息：{ access: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...', ... }
• 尝试为GET请求设置Content-Type为application/json。

观察结果 #

• 出现401 Unauthorized错误，提示Token可能未正确发送或无效。
• 虽已登录并获取Token，但获取会话的请求执行异常，MessageList组件中相关console.log未触发。
• DevTools网络面板显示GET请求已携带正确Token。

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