charles抓包,结合react项目在本地运行模拟返回接口数据

89 阅读1分钟

下载软件并安装:www.charlesproxy.com/download/

打开软件点击tools,点击Map Local Settings设置本地接口地址

image.png

image.png

react运行本地项目,使用charles模拟接口请求报错如下: image.png image.png 问题分析:

这是因为新版的Charles,如果默认使用localhost作为地址的话,无法抓取本地的数据,会一直抓线上的数据,导致请求找不到API地址,一直报404的错误

解决办法:

1)在配置接口时将 Host 中的 localhost替换为 localhost.charlesProxy.com,如下所示: image.png 2)在浏览器访问本地项目时需访问:localhost.charlesproxy.com:3000/#/

image.png