Charles抓包时本地React请求不显示怎么办？

技术令敏提问于 2026-02-24 19:25:18 阅读 18

工具

我用Charles想抓本地开发的React应用发出的API请求，但明明页面有数据，Charles里却完全看不到任何请求记录，这是为啥？

我已经开了SSL代理，也装了证书，手机抓包是正常的，就localhost:3000的请求死活不出现。试过重启Charles和浏览器都没用。

useEffect(() => {
  fetch('/api/user/profile')
    .then(res => res.json())
    .then(data => setUser(data));
}, []);

我来解答赞 1 收藏

反馈

1 条解答

Mr-永香 Lv1

你这个情况大概率是请求压根没经过 Charles 代理，因为 React 开发环境默认用的是 webpack dev server 或 Vite，它们跑在 localhost:3000 上，浏览器访问这个地址时，请求是直接发给这个本地开发服务器的，而 Charles 只能代理 HTTP/HTTPS 流量，对浏览器和本地开发服务器之间的通信无能为力——除非你显式把请求发给 Charles 代理。

最简单的验证方法：你在浏览器里手动开个代理设置，比如把本地代理设成 127.0.0.1:8888（Charles 默认端口），然后刷新页面看有没有请求，如果还是没有，那八成就是没走代理。

但你真正想抓的是 /api/user/profile 这种接口吧？注意这个路径是相对路径，意味着它其实是请求 http://localhost:3000/api/user/profile，而这个请求是发给 dev server 的，不是发给 Charles 的。

解决办法有两个方向：

第一种，让 dev server 把 API 请求反向代理到你真实的后端服务（比如你本地跑着 http://localhost:8080），然后 Charles 抓这个真实服务的请求。比如在 Vite 里加个 vite.config.js：

export default defineConfig({

  server: {

    proxy: {

      '/api': {

        target: 'http://localhost:8080',

        changeOrigin: true,

      },

    },

  },

})

这样前端请求 /api/xxx 就会被 Vite 转发到 http://localhost:8080/api/xxx，你再让 Charles 抓 localhost:8080 的流量就行。

第二种更暴力点，直接在前端代码里写死 Charles 地址，比如改成：

fetch('http://127.0.0.1:8888/api/user/profile')

不过这得你后端服务也跑在 Charles 里监听的端口上（比如 Charles 配了 remote host），或者你后端服务直接开在 8888 端口——但通常不推荐这么干，容易混乱。

另外补充一点：如果你用的是 fetch('/api/xxx') 这种写法，浏览器是按当前页面的 origin（localhost:3000）来拼完整 URL 的，不会自动走系统代理，除非你手动设置了浏览器的代理，或者 dev server 本身做了代理转发。

我之前踩过这坑，调试半天发现请求根本没出浏览器进程……后来加了 proxy 配置才看清请求到底发哪儿去了。

2026-02-24 20:02