关于Charles mock前端数据404问题

问题描述

最近学习react,使用Charles mock数据。结果API 404。

配置过程 (问题复现)

react部分
  • react项目运行在本地 3000端口,本地访问localhost:3000, 下图是在react组件中 生命周期里API的调用

clipboard.png

Charles部分
  • 在桌面创建了一个名为todolist的JSON文件
  • 在Charles里Tools下 使用map local来模拟http请求返回

clipboard.png

  • 具体配置:Map From,包含协议、端口号、地址等;Map To里 Local path就是本地文件的路径,在这里指向了本地的todolist.json

clipboard.png

结果

项目里调用,Charles代理,应该是可以了的,但是 API调用结果404...
clipboard.png

思路

  • 在本地疯狂刷新页面,发现Charles 只抓取了线上的包,并没有抓取到我本地localhost的

clipboard.png

  • 有个神仙(某种场外救援)说可能是Charles升级导致的 本地可以尝试访问http://localhost.charlesproxy...:3000
  • 尝试访问了下 发现react项目真的也运行在这个神奇的域名下,Charles也可以抓到这个域名下的包

clipboard.png

解决方法

map local也配置在这个神奇的域名下就可以了

clipboard.png

现在返回正常了

clipboard.png

阅读 3.6k

推荐阅读