元素
元素
工具
博客
问答

Charles抓包为什么看不到本地React开发的HTTPS请求？

极客东旭 阅读 55
前端

我在用 create-react-app 搭建的项目里调用后端接口，本地启的是 https://localhost:3000，但 Charles 完全抓不到这些请求，明明代理已经开了，其他 HTTP 请求都能看到。是不是因为 HTTPS 的问题？我试过在 Charles 里装了 SSL 证书，也信任了，但还是不行。

这是我的请求代码：

useEffect(() => {
  fetch('https://api.example.com/data', {
    method: 'GET',
    credentials: 'include'
  })
    .then(res => res.json())
    .then(data => console.log(data));
}, []);
我来解答 赞 12 收藏
二维码
手机扫码查看
反馈
2 条解答
设计师胜换
设计师胜换 Lv1
抓包看不到本地 React 开发的 HTTPS 请求，确实可能是由于 HTTPS 加密导致的。不过从你的描述来看，你已经做了安装和信任 Charles 的 SSL 证书这一步，理论上应该可以抓到 HTTPS 请求。我们来一步一步排查一下可能的问题。

首先，确保你的 Charles 设置正确：
1. 打开 Charles，进入 Proxy -> Proxy Settings，确认 HTTP Proxy 和 SSL Proxying 都是开启状态。
2. 确认 SSL Proxying Settings 中勾选了 Enable SSL Proxying，并且添加了你想要抓包的域名，这里是 api.example.com。

接下来，检查你的系统和浏览器设置：
1. 在 Windows 或 Mac 上，你需要信任 Charles 的 SSL 证书。你提到已经安装并信任了证书，这里再确认一遍。
2. 对于 Chrome 浏览器，你可以在地址栏输入 chrome://settings/security，找到“管理证书”，然后导入 Charles 的根证书。
3. 对于 Firefox 浏览器，你可以在地址栏输入 about:preferences#privacy，滚动到底部点击“查看证书”，然后导入 Charles 的根证书。

如果以上步骤都做完了，还是抓不到请求，可能需要检查网络请求是否真的发送到了预期的地方。你可以先尝试一下把请求改为 HTTP，看是否能被抓到：
useEffect(() => {

  fetch('http://api.example.com/data', { // 注意这里改为 http

    method: 'GET',

    credentials: 'include'

  })

    .then(res => res.json())

    .then(data => console.log(data));

}, []);

如果改成 HTTP 后能抓到请求，那么问题就在 HTTPS 上。确保你的请求确实经过了 Charles，而不是直接通过系统默认的代理或者浏览器插件。

如果依然无法解决，可能需要检查你的网络环境。有时候公司或者公共 Wi-Fi 会有额外的安全措施，阻止 Charles 抓包。

最后，如果你是在开发环境中测试，也可以考虑使用其他工具，比如 Fiddler 或者 Postman 的代理功能，看看是否能正常抓包。

希望这些步骤能帮到你，如果还有问题，可以继续追问。有时候这些问题真的是各种原因叠加起来的，得慢慢排查。
点赞
2026-03-21 00:00
UE丶小菊
UE丶小菊 Lv1
这事儿别怪 Charles，证书你也装对了，主要是浏览器（特别是 Chrome）为了性能，默认把 localhost 从代理列表里剔除了。流量根本没经过 Charles，它当然抓不到。

最简单的解决办法，别用 localhost。直接在浏览器地址栏里把 https://localhost:3000 改成 https://127.0.0.1:3000。

你那 React 代码不用动，fetch 请求只要是从 127.0.0.1 发出去的，Charles 就能截获。如果非要用 localhost，那就得去 Charles 的 Proxy Settings 里手动配置 Include，或者给本地搞个假域名（比如 local.dev）配 hosts，但改 IP 最快，不用折腾。

代码还是原来那样就行，入口变了就完事。代码放这了，虽然不用改，但为了确保逻辑闭环，还是贴一遍：

useEffect(() => {

  fetch('https://api.example.com/data', {

    method: 'GET',

    credentials: 'include'

  })

    .then(res => res.json())

    .then(data => console.log(data));

}, []);


重点：访问地址改成 127.0.0.1，别用 localhost。
点赞 5
2026-03-04 09:07
相关推荐
元素
元素
工具
博客
问答
登录/注册