如何解决axios新版本中error.config重试请求的报错问题

根因 #

新版本 Axios（v0.27+ 或 v1.x）中，error.config.headers 不再是普通对象，而是 AxiosHeaders 类的实例，该实例包含内置方法。当直接复用 error.config 重试请求时，这些方法会被误当作 HTTP 头的值，触发浏览器「无效 HTTP 头字段值」的报错。

修复代码 #

修改拦截器中重试请求的逻辑，将 AxiosHeaders 实例转换为纯键值对的普通对象：

import axios from "axios";

axios.defaults.baseURL = "http://localhost:8000/api/";

axios.interceptors.response.use(resp => resp, async error => {
    console.log('error', error);
    if (error.response?.status === 401) {
        const { data, status } = await axios.post('refresh', {}, { withCredentials: true });
        if (status === 200) {
            axios.defaults.headers.common['Authorization'] = `Bearer ${data.accessToken}`;
        }
        // 将 AxiosHeaders 转换为普通对象，移除内置方法
        const retryConfig = {
            ...error.config,
            headers: Object.fromEntries(error.config.headers)
        };
        return axios(retryConfig);
    }
    // 按 Promise 规范抛出错误，而非直接返回 error
    return Promise.reject(error);
});

关键修改说明 #

1. Headers 格式转换：Object.fromEntries(error.config.headers) 会提取 AxiosHeaders 实例中的所有头字段键值对，生成纯普通对象，避免方法被误识别为头值。
2. 错误处理规范：将 return error 改为 return Promise.reject(error)，确保拦截器的错误流程符合 Promise 链式调用规则。

替代方案 #

如果上述转换不生效，可手动重构请求配置：

return axios({
    method: error.config.method,
    url: error.config.url,
    data: error.config.data,
    headers: { ...error.config.headers }
});

内容的提问来源于stack exchange，提问作者João Pedro