Charles抓包时为什么看不到本地React开发服务器的请求？

W″统泽提问于 2026-02-24 10:14:21 阅读 9

工具

我在用 Charles 抓包调试一个 React 项目，本地开发服务器跑在 http://localhost:3000，但 Charles 里完全看不到任何请求。我已经开了 macOS 的代理设置，也装了 Charles 根证书，HTTPS 也勾选了 Enable SSL Proxying，但还是不行。

代码很简单，就是用 fetch 发个请求：

useEffect(() => {
  fetch('https://api.example.com/data')
    .then(res => res.json())
    .then(data => console.log(data));
}, []);

奇怪的是，浏览器 Network 面板能看到请求，但 Charles 就是抓不到，是不是本地 localhost 的请求默认不走代理？

Charles

我来解答赞 4 收藏

反馈

1 条解答

程序猿胜捷 Lv1

你这问题我太熟悉了，本地开发时 Charles 抓不到 localhost 请求确实是个经典坑。根本原因就是 macOS 的网络栈默认会绕过代理直接访问 localhost，Charles 作为 HTTP 代理根本收不到这些请求。

解决方案很简单，把请求地址里的 localhost 换成 127.0.0.1 就行。比如你代码里写的是：

fetch('https://api.example.com/data')

没问题，但如果中间经过了本地代理服务（比如你用了 Vite 的 proxy 或者 nginx 做了本地反代），或者你直接调的是 localhost 地址，那就得改。

如果你是直接调 localhost，比如：
fetch('http://localhost:8080/api')

就改成：
fetch('http://127.0.0.1:8080/api')

Charles 就能抓到了。因为 127.0.0.1 不会走系统的 localhost 绕过逻辑，会老老实实走代理。

另外再顺带提一嘴，如果你用的是 macOS 的系统代理设置，确保 Charles 里也开了 System Proxy（菜单栏里那个按钮亮着）。有时候开了代理但没点 System Proxy，请求也进不来。

还有一种情况是浏览器自己开了代理绕过——比如 Chrome 某些版本对 localhost 有特殊处理，但 127.0.0.1 一般都能过 Charles。你试试先，基本 99% 是这个问题。

2026-02-24 10:23