慕课实战遇到的问题
在React中想使用Charles实现接口数据模拟。
发现两个问题：
1. Charles无法代理Chrome，所以一开始没抓到chrome的包。
2. Charles无法抓localhost的包，导致无法实现接口模拟。
解决：Charles代理Chrome
Charles在Windows下，默认只代理IE浏览器，对 Chrome 需要设置后才能抓包。
SwitchySharp工具下载地址
Chrome设置教程
解决：Charles抓localhost的包
弄好之后可以发现确实可以抓取chrome的包，但并不能抓取localhost的包。
官方解释
Charles官方对不能捕获localhost本地网页的说明，以及解决方法。全文大致意思如下：
Localhost流量不会出现在Charles中
某些系统被硬编码为不使用代理进行本地主机流量，因此当您连接到http：// localhost /时，它不会显示在Charles中。
解决方法是连接到http://localhost.charlesproxy.com/。这指向IP地址127.0.0.1，因此它应该与localhost完全相同，但它的优势在于它将通过Charles。无论Charles是在跑还是你在使用Charles，这都会有效。如果您使用其他端口，例如8080，只需像往常一样添加它，例如localhost.charlesproxy.com:8080。
您还可以在该域前放置任何内容，例如myapp.localhost.charlesproxy.com，它也将始终解析为127.0.0.1。
或者，您可以尝试添加.在localhost之后，或用本机名称替换localhost，或使用本地链接IP地址（例如192.168.1.2）。
如果Charles正在运行并且您使用Charles作为代理，那么您也可以使用local.charles作为localhost的替代方案。请注意，这仅在您使用Charles作为代理时才有效，因此上述方法是首选方法，除非您特别希望请求在不使用Charles时失败。
解决方法
原本想抓取的网址：http://localhost:3000/
现在换成：http://localhost.charlesproxy.com:3000/
成功抓包（例子可看下方）
接口模拟例子
桌面右键新建文件todolist.json并放入数据（这就是接口的模拟数据）:
1 | ["你好呀","你叫什么名字？","我是胡萝卜"] |
在http://localhost.charlesproxy.com:3000/中我们可以看到在父组件TodoList.js中设置的**AJAX请求的接口地址**：
希望在 TodoList.js 组件中发送AJAX请求时将桌面上的todolist.json文件内的数据返回过来，则需要借助 Charles 进行设置。
打开 Charles,进行设置，抓取到请求的接口地址是“http://localhost.charlesproxy.com:3000/api/todolist”时就返回`todolist.json`文件的数据：
发送的AJAX请求 数据获取成功：
可以看到获取到的数据：