在日常项目中，由于前后端分离后端又没有及时提供接口，因此经常需要前端自己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
网友评论