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

技术令敏 阅读 57

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

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

useEffect(() => {
  fetch('/api/user/profile')
    .then(res => res.json())
    .then(data => setUser(data));
}, []);
我来解答 赞 4 收藏
二维码
手机扫码查看
2 条解答
轩辕义霞
这个问题的原因是Charles是通过系统代理来抓包的,但浏览器请求localhost时是直接走本地回环,不经过系统代理,所以Charles根本看不到。

解决办法很简单,把localhost换成 localhost.charlesproxy.com 这个域名就行。比如你的请求改成:

fetch('http://localhost.charlesproxy.com:3000/api/user/profile')
// 或者如果你的后端在其他端口
fetch('http://localhost.charlesproxy.com:8080/api/user/profile')


这个域名会被Charles识别为外部请求,然后走代理,Charles就能抓到了。

如果还不行,检查一下Charles的Proxy Settings里有没有勾选"Enable transparent proxying",有时候这个也管用。

另外提醒一下,后端服务如果监听的是127.0.0.1而不是0.0.0.0,可能也需要确认一下端口是否正确暴露。
点赞
2026-03-14 14:10
Mr-永香
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 配置才看清请求到底发哪儿去了。
点赞 1
2026-02-24 20:02