Axios报cancelToken未定义错误的原因与修复方法

你遇到的TypeError: Cannot read properties of undefined (reading 'cancelToken')错误，根源是写的Axios请求拦截器没有返回处理后的请求配置对象。
Axios的请求拦截器有明确约定：传入的成功回调函数必须返回请求配置（config），否则拦截器执行完成后，后续的请求发送逻辑拿不到完整的配置参数，就会在读取配置上的cancelToken属性时抛出异常。这个问题和本地是否存储鉴权token无关——不管localStorage里有没有profile字段，你写的拦截器回调都没有写返回值，默认返回undefined，所有经过这个Axios实例的请求都会触发报错。
你之前尝试的CancelToken修复方案，本身逻辑是主动取消重复请求，会直接终止所有请求流程，自然会返回"Cancel repeated request"的取消提示，完全不适配当前场景。

修改请求封装文件index.js里的拦截器逻辑，补全返回值即可，建议同时加headers的兜底判断避免边界问题：

import axios from 'axios';

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

API.interceptors.request.use((req) => {
    // 兜底处理headers不存在的边界情况
    req.headers = req.headers || {};
    const profileStr = localStorage.getItem('profile');
    if (profileStr) {
        const profile = JSON.parse(profileStr);
        req.headers.Authorization = `Bearer ${profile.token}`
    }
    // *必须返回处理后的请求配置！
    return req;
})

// 下方接口封装逻辑不需要改动
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);

修改完成后逻辑符合预期：

• 未登录状态下，拦截器会直接返回原始请求配置，登录、注册接口可以正常发送
• 登录状态下，拦截器会自动给请求头加上Authorization鉴权字段，后端校验中间件可以正常读取token

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