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

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

工具

我在开发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

我来解答赞 18 收藏

反馈

2 条解答

Des.雅涵 Lv1

这个问题的关键是 Postman Interceptor 并不是靠监听浏览器的网络请求来工作的，它只拦截通过 Chrome 扩展 API 主动“转发”过去的请求，而 Vue 项目里用 Axios 发起的请求是浏览器原生的 fetch 或 XMLHttpRequest，不会自动走 Interceptor 的转发通道。

很多人以为装了 Interceptor 就能像 Fiddler 或 Charles 那样透明抓包，其实它根本不是这么设计的。Interceptor 的原理是：你得在 Postman 里点击 Interceptor 的“Record”按钮，然后在浏览器里用 Postman 的 UI 发请求，或者在 Chrome 扩展里通过 chrome.webRequest 主动拦截并转发——但 Axios 的请求走的是原生网络栈，不会触发 Interceptor 的转发逻辑。

不过别急，有几种可行方案：

第一种，也是最推荐的，直接用 Postman 的 Chrome 扩展功能，而不是 Interceptor。在 Chrome 里打开你的 Vue 页面，点击页面右上角的 Postman 图标，选择「Send to Postman」，然后在 Postman 里就能看到请求了。这个功能是 Chrome 扩展直接从当前页面的 devtools 网络面板里抓请求，比 Interceptor 更靠谱，也更符合现代开发习惯。

第二种，如果你坚持要用 Interceptor，那得手动把 Axios 的请求改成走 fetch + chrome.runtime.sendMessage 的方式转发，但这就太反人类了。举个例子：

axios.interceptors.request.use(config => {

  // 假装要转发，其实不推荐

  chrome.runtime.sendMessage({

    type: 'interceptor',

    url: config.url,

    method: config.method,

    headers: config.headers,

    data: config.data

  })

  return config

})

你得在 background script 里监听这个消息，再用 chrome.webRequest 重发一遍，这相当于自己写了个简陋版抓包工具，维护成本极高，还容易出错。

第三种，也是我实际项目里最常用的：用 Proxy 代理中间层。比如在开发环境启动一个本地代理服务（Node.js 写个简单的 Express 或 Koa），让 Axios 把请求发到这个代理，代理再转发到目标服务器，同时把请求内容打印出来。这样你不仅能抓到请求，还能加点日志、Mock、延迟啥的调试起来更爽。

示例代码（代理服务）：

// proxy-server.js

const express = require('express')

const { createProxyMiddleware } = require('http-proxy-middleware')

const app = express()



app.use('/api', createProxyMiddleware({

  target: 'https://your-real-api.com',

  changeOrigin: true,

  logLevel: 'debug',

  onProxyReq(proxyReq, req, res) {

    console.log('捕获到请求：', {

      method: req.method,

      url: req.url,

      headers: req.headers,

      body: req.body

    })

  }

}))



app.listen(3001, () => {

  console.log('代理服务启动在 3001 端口')

})

然后在 Vue 的 axios.create 里指定 baseURL: 'http://localhost:3001'，这样所有请求都会先经过这个代理，你就能在终端里看到完整请求内容了。

最后再补充一句，Postman Interceptor 本身从 2021 年起就基本停止维护了，官方文档也明确写着它只适用于 Postman Desktop 的“代理模式”，而现代浏览器的网络隔离机制让它越来越难用。真要抓包，不如直接用浏览器自带的 Network 面板 + Postman 的「Import from DevTools」功能，或者用 Charles / Fiddler 这类专业工具，别跟 Interceptor 死磕了，真的不值得。

2026-02-25 15:15

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