“Never complain, never explain. Resist the temptation to defend yourself or make excuses. ”
为什么要使用whistle
不知道大家有没有遇到过这样的问题：线上接口出现了问题，但是不知道是接口传参出现了问题还是接口本身出了问题，毕竟每个上了线的功能肯定都是经过了测试了的。然后后端哼哧哼哧的打开调试窗口看传参是否正确，然后复制请求在自己本地先测试一下，看是不是自己接口有问题。但是这个时候有一个很麻烦的事情的，可能这个接口的参数是通过前面多个步骤操作得来的请求数据，这个时候就不得不自己mock数据测试了。所以我今天想给大家介绍的这个工具就是可以将线上的前端请求代理到本地或开发环境，这样你就能够通过在页面点击的方式去复现线上的bug，而且这样能够确保100%还原操作，而不用自己去moke数据了。听完这些不知道你心动了没，废话不多说。开始主角的介绍
whistle介绍
主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用，不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能：
从以上的官方介绍可以看出，whistle其实就是一个代理工具。对没错它就是一个代理软件，但是在使用方上确有很多令人惊喜的小tips(手动狗头):
- 代理线上请求到本地服务
- 帮助前端mock后台请求
- …
whistle安装
安装直接参考安装文档即可 安装文档
注意事项：
命令行启动
官方文档的 启动命令为npm i -g whistle && w2 start --init, 请注意这里的init。–init [bypass] auto set global proxy (and bypass) and install root CA
根据官方的help说明，init 命令会将whistle设置成 系统的全局代理并且安装whistle生成的root证书，所以可能会导致，安装完成之后浏览器无法上网的问题。
解决方案也很简单- 只使用
npm i -g whistle && w2 start不init。也就是不将whistle设置为系统代理 - 使用
w2 proxy off关闭whistle为全局代理
- 只使用
证书安装
如果你没有使用 init 命令初始化。那whistle就并不会将生成的证书安装到系统里。所以也就无法代理https请求
这种情况下，只用下载证书，将证书安装到受信任的域中即可
whistle使用
whistle的使用有很多技巧，包括不限于 代理请求 转发请求 mock请求等
代理请求
代理请求用的最多，也是功能最强大的功能。其强大的代理能力取决于它的匹配规则。
需要注意的是如果存在前端和后台存在跨域问题，那么代理配置得加上 OPTIONS（预检请求） 的处理，配置如下1
2
3
4
5
6
7
8
9```cors2
origin: *
headers: Content-Type,token
credentials: true
maxAge: 300000
```
https://test/api/ includeFilter://m:options resCors://{cors2} statusCode://200
https://test/api/ http://127.0.0.1:11040/ resCors://{cors2}
这上面的配置是将跨域的预检请求直接返回200,在代理真正的请求到本地即可
总结
最后，代理的工具可能很多，但是我个人觉得whistle是一个轻量级且全平台的代理工具，可以很方便的调试web页面，调试请求。以上的使用只是我个人在工作过程中的最常用以及遇到的部分问题的总结，如果有更好的工具和使用方法欢迎联系交流
—— author.zero 后记于 2023.03.05
