1. 介绍

whistle(读音[ˈwɪsəl]，拼音[wēisǒu])基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用，不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能

2. 安装

官方文档-安装步骤

• 2.1 npm安装

npm install -g whistle  

• 2.2 基本命令

// 启动whistle:
w2 start


重启whsitle:
w2 restart

停止whistle:
w2 stop

调试模式启动whistle(主要用于查看whistle的异常及插件开发):
$ w2 run

• 2.2 配置代理
  详细步骤见官方文档 官方文档-安装步骤
  推荐使用浏览器代理插件Proxy SwitchyOmega,而不是直接修改电脑代理，这样可以不影响其他上网应用
  下载安装 | Proxy SwitchyOmega (proxy-switchyomega.com)

3. 使用

当所有安装都已经完成之后，就可以进行使用了

• 3.1 启动whistle

// 终端运行命令 
w2 start

启动完成截图.png

可以通过本地地址访问whistle的界面

• 3.2 配置Proxy SwitchyOmega

  
  
  代理模式配置.png

• 3.2.1 可以直接在对应网站，直接切换你配置的代理

  
  
  代理设置方法1_1.png
  
  
  代理设置方法1_2.png

• 3.2.2 使用auto_switch 模式
  在对应域名下,Proxy SwitchyOmega会根据对应的域名，来调用你定义的代理服务器

  
  
  auto_switch.png

但是这里有个问题就是,如果后端访问接口跟你配置的域名不一致，那么会走不到这个代理来
比如 前端访问为 www.example.com 后端服务器为www.example1.com 那么 你就需要再配置一个 www.example1.com 调用self_proxy 代理 如果,后端有很多接口，那就直接使用第一种最好，直接选择self_proxy代理，只是这种选择会影响到浏览器其他网页的访问

注意域名通配符配置 需要这么配置 假设你的网址为 https://adc.example.com.cn

域名通配符配置.png

或者使用网址通配符配置 对于这一个存在一些限制 Chromium 完整网址限制 · FelisCatus/SwitchyOmega Wiki · GitHub

网址通配符配置.png

github说明.png

如果你不知道该怎么写这个通配符可以这么做，代理软件会帮助你生成一个通配符

步骤1.png

步骤2.png

• 3.3 如果你想抓取https请求则需要在电脑安装证书

注意：安装证书也就相当于你把别人的指纹录入到了你家的密码锁，因此安装三方证书一定要确认这个三方证书是可信的而不是任意一个网站上下载的证书（这个判断需要个人根据经验自行判断）
对于https,传输的数据，没有证书进行加解密，外界是无法破解传输内容的，因此计算有第三方拦截了请求，他也不知道具体的内容是什么（这里设计到安全与鉴权相关知识，此处仅仅简单举例）
但是你安装与信任了外部证书，就相当于这个新安装的证书也可以解密你传输的数据

杂谈： 对于一些公司会要求安装公司的软件，以达到了解员工日常活动的目的，就是这个原理，如果员工仅仅是连接公司网络，不安装公司软件，那么公司是无法获知员工的访问内容的，而仅仅只能知道员工访问了那些网站，具体内容是不知道的

• 3.4 配置whistle

在 Proxy SwitchyOmega配置后 并访问对应网页假设 网页为 www.abc.com 则请求就会走到 www.example.com

whistle 转发配置.png

这个时候 whistle的这个配置生效 就会把所有访问www.example.com 的请求 都转发到 whistle的端口（当然你也可以指定你自己的代理服务器，不一定是你的本地，也可以是你本地的其他服务或者线上的其他服务,甚至whistle的功能你也可以自己通过node写一个）

4. 抓取内容

捕获请求.png

5. 修改内容（功能重点）

对于上面的 代理 也就是如果访问 a.com 显示b.com的内容，都是可以通过修改本机的host文件来实现的（这就涉及到浏览器访问网页按下回车后，干了哪些事）

简单说浏览器的域名解析（所有的域名 最终都是要解析为ip，域名是为了方便记忆，以及访问而产生的）

• 就是浏览器先找自己的缓存看有没有
• 自己没有 看本地host文件有没有域名与ip对应关系
• host也没有 访问dns服务器 （dns服务器会一层一层网上找，类似于 从县到市再到省再到国家这种）
• 能查到则访问对应ip，查不到则浏览器会显示无法访问

5.1 修改请求返回 header 可以用来跨域（在服务器暂时无法配置解决跨域，可以本地先通过修改请求返回header来越过，当然也可以关闭浏览器的跨域限制，这里又涉及到了为什么跨域以及跨域的解决方法 之前文章：浏览器跨域与处理方案 - 简书 (jianshu.com)
）

此处仅举例 修改请求返回header 其余功能参考官方文档
5.1.1先在values 定义对应修改header的json文件

values json文件配置.png

{
  "Access-Control-Allow-Origin": "http://abc.com",
    "Access-Control-Allow-Credentials":true
}

image.png

5.1.2 在Rules中 定义规则 对resHeader 的覆写修改使用 response.json 文件中的内容

rules 定义规则.png

https://example.com resHeaders://`{response.json}`

resHeaders · 官网文档

本地修改 效果截图.png