Charles代理Chrome抓取localhost的包

慕课实战遇到的问题

在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`文件的数据:
步骤1
步骤2

发送的AJAX请求 数据获取成功
发送的AJAX请求 数据获取成功

可以看到获取到的数据
可以看到获取到的数据


,