使用Charles实现前端数据mock和解决Charles接口报404

在日常项目中,由于前后端分离后端又没有及时提供接口,因此经常需要前端自己mock数据。下面主要介绍使用charles这个软件进行mock数据的方法

1. 首先当然是下载charles这个软件:https://www.charlesproxy.com/latest-release/download.do 根据自己系统下载对应的包,安装一直点下一步即可。

2.接下来在桌面或者其他地方新建一个json文件,里面写上你需要mock的数据。

3.打开刚才安装的charles软件:

图一

4.然后在charles中配置tools -> Map Local Settings:

图2

5.点击add按钮后在弹窗中填入协议、域名、端口、请求路径和要mock的文件路径。填完之后点击OK

图3

填写完相关信息后这里就会多出一条刚刚填的信息勾选它, Enable Map Local也要勾选。最后点击OK就完成了所有配置。

图4

6. 在你的代码中调用下刚刚填写的请求路径,运行代码在浏览器控制台看看是否请求成功。

图5

按照上面步骤配置好后还是报错404的解决方法:

如果还是报错404,你需要重新配置第五步,tools -> Map Local Settings 双击刚刚添加的哪条信息。然后host这一栏改成http://localhost.charlesproxy.com/ 其他不用动:

图6

最后浏览器中访问时不能直接使用localhost加端口号,要用localhost.charlesproxy.com加端口号,如:http://localhost.charlesproxy.com:3000/ 。这样就不会报404请求也成功啦!

图7
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、charles的使用 1.1 charles的说明 Charles其实是一款代理服务器,通过过将自己设置成系统...
    朝畫夕拾阅读 4,763评论 0 0
  • 一、charles的使用 1.1 charles的说明 Charles其实是一款代理服务器,通过过将自己设置成系统...
    咖啡绿茶1991阅读 22,047评论 5 26
  • 一、charles的使用 1.1 charles的说明 Charles其实是一款代理服务器,通过过将自己设置成系统...
    玲儿珑阅读 4,095评论 0 4
  • 简介 Charles其实是一款代理服务器,通过成为电脑或者浏览器的代理,然后截取请求和请求结果达到分析抓包的目的。...
    薪火_阅读 101,381评论 10 60
  • 爱是一个人坚持生活的最终动力。爱的能力是人类最伟大的能力。一个幼童如果在童年里能够得到完整真实的爱,那将成为他人生...
    卡奇加糖阅读 1,355评论 0 0

友情链接更多精彩内容