axios 的 cancelToken 是什么以及如何修复它？

Question

我制作了一个 React 应用程序，并使用 Axios 向后端发出请求。我在后端创建了一个用于授权的中间件，在前端，我尝试将身份验证令牌传递给对后端进行的每个调用（如果本地存储中存在）。在我添加一切正常运行的逻辑之前，现在每次我尝试登录或注册时，我都会在控制台中看到这个

TypeError: Cannot read properties of undefined (reading 'cancelToken')
    at throwIfCancellationRequested (dispatchRequest.js:12:1)
    at dispatchRequest (dispatchRequest.js:24:1)
    at async auth.js:6:1 

我index.js的处理对后端的每个调用如下所示：

TypeError: Cannot read properties of undefined (reading 'cancelToken')
    at throwIfCancellationRequested (dispatchRequest.js:12:1)
    at dispatchRequest (dispatchRequest.js:24:1)
    at async auth.js:6:1 

现在我还没有登录，所以本地存储中没有配置文件。我尝试添加这个，我在堆栈溢出上发现了这个，但没有用

import axios from 'axios';

const API = axios.create({
    baseURL: 'http://localhost:3500'
})


API.interceptors.request.use((req) => {
    if (localStorage.getItem('profile')) {
        req.headers.Authorization = `Bearer ${JSON.parse(localStorage.getItem('profile')).token}`
    }

})

export const fetchHunts = () => API.get('/hunts');

export const createHunt = (newHunt) => API.post('/hunts', newHunt);

export const updateHunt = (id, updatedHunt) => API.patch(`/hunts/${id}`, updatedHunt);

export const deleteHunt = (id) => API.delete(`/hunts/${id}`);


export const signInAdmin = (formData) => API.post('/admins/signinadmin', formData);
export const signUpAdmin = (formData) => API.post('/admins/signupadmin', formData);

但是当我使用它时，它只返回“取消重复请求”并且什么也没做。你知道我该如何解决这个问题吗？先感谢您！

Answer 1

根据Axios 文档 - 拦截器，拦截器函数应返回req.

API.interceptors.request.use((req) => {
    if(localStorage.getItem('profile')) {
        req.headers.Authorization = `Bearer ${JSON.parse(localStorage.getItem('profile')).token}`;
    }
    return req;
})