安利下我的前端请求 mock 工具

6,295 阅读2分钟

项目提供一个简单的mock服务器,配合Chrome插件parrot-mocker,支持:

  • 转发页面请求(xhr/jsonp/fetch)到真正的web服务器,或者只返回mock数据
  • 列表展示被转发的请求
  • 针对特定请求配置特定mock数据

不支持:

  • cookie敏感的请求,因为插件转发的请求只携带了'页面所在域'的cookie,而不是'请求本身的域'的cookie
  • 相对于页面的请求或本地特有dns的请求,因为此类请求到达mock服务器后,无法解析到真正的host
  • https页面,除非把本项目部署成https(已部署到leancloud

如何使用

1.准备

安装Chrome插件,parrot-mocker ,使得页面上的请求可以被拦截转发到mock服务器。

2.访问

使用前必须先在Chrome中打开首页

正常访问需要测试的页面,例如:demo页面,该页面加载完后会分别发送xhr/jsonp/fetch三个请求。

打开插件输入mock服务器的地址并点击mock按钮,页面会自动刷新。

此时会发现页面请求已经被转发到了mock服务器,在首页上也可以浏览到。如果再访问相同域的其它页面都将具有相同效果,因为插件在cookie中记录了转发相关信息。

3.Mock

选中请求列表中的任意请求,然后点击'Add'按钮,该请求就被添加到mock配置中。

打开Config页面可以编辑mock数据,记得'Apply'才能让mock数据真正生效。

刷新原来的测试链接,会发现数据已经被mock。

4.停止

点开插件然后点击红色按钮,页面将恢复原状。

本地启动

默认启动在端口8080。

node ./server/index.js

或者也可以通过环境变量来更换端口。

PORT=8888 node ./server/index.js

致谢


本文对你有帮助?欢迎扫码加入前端学习小组微信群: