求助：Chrome调试器未显示React应用中的Fetch请求

API 探路者

2026-8-3

排查Fetch请求未出现在Chrome网络面板的问题

可能的原因及解决办法

请求被浏览器缓存拦截
Fetch默认启用缓存策略，若之前请求过该URL且响应头允许缓存，浏览器会直接返回缓存结果，不会发起新请求。可以在fetch配置中强制禁用缓存：
```
fetch("http://127.0.0.1:8001/api/test", { cache: "no-store" })
```
或者在Chrome网络面板勾选「Disable cache」选项，刷新页面后重新触发请求。
Service Worker拦截并返回缓存
如果应用注册了Service Worker，它可能拦截Fetch请求并直接返回缓存数据，导致真实请求未发送到服务器。可在Chrome DevTools的「Application」面板找到「Service Workers」，勾选「Bypass for network」后重新测试。
请求在DevTools开启前已完成
若Fetch请求在打开DevTools之前就执行完毕，网络面板不会记录该请求。解决方式：
- 打开DevTools后再刷新页面
- 在请求代码前添加断点，确保请求在DevTools开启后执行：
```
debugger;
fetch("http://127.0.0.1:8001/api/test")
```

代码逻辑未实际发起请求
即使你拿到了数据，也可能是缓存或其他逻辑返回的假数据。在Fetch的回调中添加日志，确认请求是否真的执行：

fetch("http://127.0.0.1:8001/api/test")
  .then(res => {
    console.log("响应状态码:", res.status);
    return res.json();
  })
  .then(data => console.log("返回数据:", data))
  .catch(err => console.error("请求异常:", err));

通过控制台日志验证请求是否实际发起。