通过抓包软件Charles和Fiddle快速模拟(Mock)数据

使用Charles实现本地数据mock

由于在实际开发中，一般进行前后端分离，通过接口来进行数据交互。所以我们使用charles-proxy来进行模拟数据接口。Charles能够抓取浏览器发起的请求，然后做出一些处理和返回。官网下载
配置参考

注册账号(不注册的话，30天会过期，每隔一段时间会关闭一次) 账号：https://zhile.io 密码：48891cf209c6d32bf4

配置接口文件

在本地创建接口文件返回的json文件，通过charles配置访问地址返回对应的json文件

设置charles

菜单Tools -> Map Local. 勾选Enable Map Local，点击Add按钮新增一个接口，选择对应返回的json文件

Protocol: http
Host: localhost.charlesproxy.com
Port: 3000
Path: /api/todolist // 根据不同的地址返回对应的数据
Query: // 参数

注意：Host选项如果只写 localhost，会出现浏览器访问时出现404，经过查看发现charles能抓取线上的包，但是不能抓取本地的包，那么把我们想要访问的接口挂到 localhost.charlesproxy.com:3000域名下，就能访问了。官方说明

修改hosts文件对127.0.0.1 进行映射，host文件在c:\windows\system32\drivers\etc 下。快速进入hosts文件夹的方法。同时按下Win+R组合键，调出运行栏，输入 c:\windows\system32\drivers\etc 确定即可打开对应的文件夹。

发起请求，会遇到跨域问题

axios.get('http://localhost.charlesproxy.com:3000/api/todolist')
.then((res) => {
    console.log(res);
})
.catch((error) => {
	console.log(error);    
})
// 在控制台中会提示一下错误：
// 虽然ajax访问接口能正常的获取到数据，并成功得到202，但是返回结果仍为error，查看以下错误Access to XMLHttpRequest at 'http://localhost.charlesproxy.com:3000/api/todolist' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.，发现出现跨域问题。 

Charles配置解决跨域

跨域资源共享 CORS 详解（ 阮一峰）

解决方法：使用charles的rewrite修改options请求的response header

• 点击Tools -> Rewrite
• 添加rewrite配置

  1. 开启Enable Rewrite

  2. 点击左边add添加rewrite配置

  3. 设置名称，点击第一个模块中的add，添加location，什么不填写点击确定匹配所有

  4. 设置请求头：点击第二个模块中的add，添加Type：add header 和 response status

     修改Header下的四个字段：

     Access-Control-Allow-Origin: *

     Access-Control-Allow-Methods: GET,POST,OPTIONS

     Access-Control-Allow-Headers: Accept,Origin,X-Requested-With,Content-Type,Last-Modified

     Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH

     选择Type为Add Header， 勾选Response，设置Replace中的Name和Value，勾选Replace all。

     选择Type为Response Status，勾选Response，勾选Match whole value

Charles破解：

• 从这个网站生成破解后的charles.jar文件

• 替换本地charles.jar文件即可

  windows: c:\Program Files\Charles\lib\

Fiddle快速模拟mock

• 创建访问接口返回的json文件
• 选中目标信息，点击autoresponde，勾选下面对应的3个复选框，点击Add Rule添加访问路径对应返回的数据。
• Fiddle下载地址

// 编辑Rule Editor
// 设置请求地址
EXACT:http://localhost:3000/api/getTodoList
// 对应请求地址输出的数据
c:\Users\chinatime\Desktop\mock\data.json
// 点击保存即可