如何结合Express全局配置Axios拦截器？现有配置未生效

API 探路者

2026-8-21

Axios全局拦截器不生效的问题排查与修复

你遇到的问题主要是实例不匹配加上几处语法/拼写错误导致的，具体问题和修复方案如下：

核心问题：拦截器绑定的实例和请求用的实例不一致

你在configAxios里给Axios（axios的构造函数）添加了拦截器，但实际发起请求用的是默认导出的axios实例——这两个不是同一个对象。拦截器是绑定在特定axios实例上的，给构造函数加拦截器不会作用到默认实例上。

其他语法/拼写错误

类的构造函数写法错误：应该用constructor()而非Foo()
函数名不匹配：导入的是configAxios，但调用的是configureAxios()
axios导入语句语法错误：默认导出是axios实例，Axios是构造函数，不需要同时这么导入

修复后的代码

Foo.ts

import axios from 'axios';
import { configAxios } from './config'; // 路径根据实际项目结构调整

class Foo {
  constructor() {
    configAxios(); // 调用正确的拦截器配置函数
  }

  public callAxios() {
    // 补充请求配置，否则request方法会报错
    axios.request({ url: '/your-api-path', method: 'GET' });
  }
}

export default new Foo();

config.ts

import axios from 'axios'; // 导入默认的axios实例

export function configAxios() {
  // 请求拦截器：必须返回请求配置，否则请求会中断
  axios.interceptors.request.use(req => {
    console.log('请求已被拦截');
    // 这里添加你的请求拦截逻辑，比如设置token
    return req;
  });

  // 响应拦截器：处理成功和错误情况
  axios.interceptors.response.use(res => {
    console.log('响应已被拦截');
    // 这里添加你的响应处理逻辑
    return res;
  }, error => {
    // 别忘了处理响应错误
    console.error('响应错误被拦截', error);
    return Promise.reject(error);
  });
}