Postman Interceptor无法拦截Vue项目的Axios请求，是什么原因？

西门培静提问于 2026-02-14 06:55:24 阅读 58

工具

我在开发Vue项目时用Postman Interceptor想抓取Axios请求，但发现所有请求都没被拦截到。已经按官方说明安装了chrome插件并配置了证书，测试请求也能成功拦截，但项目里的真实请求就是不显示。

代码是这样写的：


<template>
  <button @click="fetchData">获取数据</button>
</template>

<script>
export default {
  methods: {
    async fetchData() {
      await axios.get('/api/data', {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      })
    }
  }
}
</script>

尝试过在请求头加X-Requested-With标识，也检查过Interceptor状态是启用的。难道是Vue的axios配置有什么特殊要求吗？

Postman

我来解答赞 9 收藏

反馈

1 条解答

Tr° 好妍 Lv1

这个问题的关键在于Postman Interceptor的工作原理和Vue项目中的请求配置。Interceptor本质上是通过代理Chrome浏览器的网络请求来捕获数据，但它对跨域请求的支持有限。

在你的代码里，axios.get('/api/data') 这个请求路径是一个相对路径，最终会被Vue开发服务器代理到后端API。这种情况下，请求其实是从你的Vue开发服务器（比如webpack-dev-server）发出的，而不是直接从浏览器发出的。Interceptor无法拦截这类代理后的请求，因为它只拦截浏览器直接发起的网络请求。

解决办法有几种：

第一种，修改Vue项目的代理配置，让请求直接发到目标服务器而不是通过开发服务器代理。找到 vue.config.js 文件，把代理规则去掉或者改为 target: '' 空值。然后在Axios请求里写完整的URL，比如 axios.get('https://your-api-domain.com/api/data')。

第二种，如果你必须用代理调试，那就不用Interceptor了，改用Postman内置的代理功能。具体操作是打开Postman的Proxy设置，配置一个本地代理端口，比如5555。然后在Chrome的网络设置里手动设置代理为 localhost:5555，这样所有流量都会经过Postman。

第三种，前端这块其实可以借助浏览器自带的开发者工具，直接在Network面板查看请求详情。现代浏览器的开发者工具已经非常强大，基本能满足大部分调试需求。

顺便吐槽一句，Interceptor这个功能本身现在用得越来越少了，官方也不怎么维护了。建议你直接用Postman的其他功能或者浏览器调试工具来解决问题。如果非要抓包的话，Fiddler或者Charles这些专门的抓包工具会更靠谱一些。

2026-02-14 20:06