通过抓包软件Charles和Fiddle快速模拟(Mock)数据
Posted yuxi2018
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过抓包软件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配置解决跨域
解决方法:使用charles的rewrite修改options请求的response header
- 点击Tools -> Rewrite
- 添加rewrite配置
开启Enable Rewrite
点击左边add添加rewrite配置
设置名称,点击第一个模块中的add,添加location,什么不填写点击确定匹配所有
设置请求头:点击第二个模块中的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
// 点击保存即可
以上是关于通过抓包软件Charles和Fiddle快速模拟(Mock)数据的主要内容,如果未能解决你的问题,请参考以下文章