Vue项目中Axios请求拦截器未触发问题求助

我之前也踩过一模一样的坑！最常见的原因就是你配置拦截器的Axios实例和组件里实际发起请求用的不是同一个实例，下面分几种情况给你排查和解决办法：

1. 检查是否使用了同一个Axios实例 #

很多同学会犯这个错：在单独文件里创建了带拦截器的自定义实例，但组件里直接导入了默认的axios，导致拦截器根本没生效。

正确的封装方式： #

先创建一个封装好的Axios实例文件（比如src/utils/request.js）：

import axios from 'axios'

// 创建自定义Axios实例
const request = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 你的接口前缀
  timeout: 5000
})

// 配置请求拦截器
request.interceptors.request.use(
  config => {
    console.log('请求拦截器已触发！')
    // 这里可以加你的逻辑，比如携带token
    // config.headers.Authorization = localStorage.getItem('token')
    return config // 必须返回config，否则请求会被中断
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器（可选）
request.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default request

组件中使用封装后的实例： #

不要再直接导入默认的axios，而是用上面封装好的request：

// 你的Vue组件文件
import request from '@/utils/request'

export default {
  methods: {
    async fetchData() {
      try {
        const res = await request.get('/your-api-path')
        console.log(res)
      } catch (err) {
        console.error(err)
      }
    }
  }
}

2. 检查拦截器代码是否正确返回值 #

如果拦截器里忘记返回config（请求拦截器）或者response（响应拦截器），会导致请求被中断，看起来像是拦截器没触发。

❌ 错误示例（忘记return）：

request.interceptors.request.use(
  config => {
    console.log('我在拦截器里')
    // 这里没返回config，请求会卡住
  }
)

✅ 正确写法：
一定要确保回调函数返回对应的参数，或者抛出错误：

request.interceptors.request.use(
  config => {
    console.log('请求拦截器触发')
    return config // 必须返回
  },
  error => {
    return Promise.reject(error) // 错误也要返回Promise
  }
)

3. 确认拦截器配置时机 #

要保证拦截器是在任何请求发送之前就配置好的。比如不要在组件的mounted钩子才去配置拦截器，这时候如果组件在挂载前就发起了请求（比如created里），拦截器就不会生效。

最佳实践是在封装Axios实例的文件里直接配置拦截器，然后导出实例，这样在项目启动时就完成了拦截器的配置。

最后排查步骤 #

1. 先确认组件里用的是不是封装后的Axios实例
2. 检查拦截器代码有没有正确返回config/response
3. 查看控制台有没有报错，可能是拦截器里的代码出错导致没执行到返回步骤

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