Charles修改响应内容后浏览器不显示更改，是怎么回事？

W″芯依提问于 2026-02-05 19:51:33 阅读 201

工具

我在用Charles拦截API请求时，通过Edit功能把返回的isSuccess字段改成true，保存后浏览器还是显示失败页面。这是哪里出问题了？

我的React代码是这样写的，明明应该渲染成功提示啊：


useEffect(() => {
  fetch('/api/login')
    .then(res => res.json())
    .then(data => {
      if (data.isSuccess) {
        setMsg('登录成功！')
      } else {
        setMsg('登录失败')
      }
    })
}, [])

我确认过Charles断点已经激活，响应内容确实改成了{“isSuccess”:true}，但控制台没有报错，页面就是不显示成功信息。重启过Charles和浏览器都没用，是不是需要配置什么特殊选项？

Charles Edit编辑

我来解答赞 8 收藏

反馈

2 条解答

打工人皓轩 Lv1

你这个问题是浏览器缓存搞的鬼。改完响应后点右键选"Clear Cache"，再刷新页面就生效了。代码没问题，就是浏览器本地缓存了之前的响应结果，你改的响应没生效。

fetch('/api/login')的时候如果看到size栏显示(from cache)就说明是缓存问题。下次拦截修改的时候记得先清缓存，或者在请求头加个随机参数比如?t=123456避免缓存。

2026-02-06 15:33

令狐明轩 Lv1

这种情况我之前也遇到过，大概率是缓存搞的鬼。浏览器对fetch请求的缓存策略比较激进，尤其是你用Charles改过响应之后。

先试试在fetch里加上cache: 'no-store'：

fetch('/api/login', {

  cache: 'no-store'

})

如果你不想改代码，也可以在Charles里配置一下响应头：
添加Cache-Control: no-cache或者max-age=0，让浏览器每次请求都去重新拉取

还有一种可能是你拦截的API请求被重定向了。比如实际请求地址是/api/login，但被302重定向到另一个地址，这时候Charles的Edit功能就失效了。你可以在Charles里看下完整的请求/响应流程，确认有没有302跳转

另外，React的useEffect依赖项建议写上空数组，虽然不影响当前问题，但可以避免重复执行：

useEffect(() => {

  // ...

}, [])

2026-02-05 19:54