whistle网络代理实战分享

前言：前端开发的小伙伴可能有遇到过这种情况：

本地运行一个http协议的h5页面，在微信打不开，微信小程序业务域名只能配置https协议。这样就会导致真机调试非常麻烦，每次都要发一个版本。（如果小伙伴有不用代理解决的方法欢迎评论区交流～）

此时，网络代理就能发挥作用啦～（我目前只用过whistle这一个代理工作，其他类似工具也欢迎小伙伴评论区讨论～）

网络代理

网络代理的工作原理可以分为以下几个步骤：

1. 客户端配置代理：客户端需要将代理服务器的地址和端口配置在网络设置中，以便将请求发送到代理服务器。

2. 客户端发送请求：客户端发起网络请求时，请求会被发送到配置的代理服务器，而不是直接发送到目标服务器。

3. 代理服务器接收请求：代理服务器接收到客户端发送的请求后，会记录请求的相关信息，如请求方法、URL、头部信息等。

4. 代理服务器转发请求：代理服务器将接收到的请求转发给目标服务器。它会在请求中保持原始的请求信息，并可以选择性地修改请求的头部、URL或请求体等内容。

5. 目标服务器处理请求：目标服务器接收到代理服务器转发的请求后，会像处理任何其他请求一样进行处理。它将根据请求的内容执行相应的操作，并生成响应数据。

6. 代理服务器接收响应：目标服务器生成响应后，将响应发送回代理服务器。

7. 代理服务器转发响应：代理服务器接收到目标服务器的响应后，会将响应转发给客户端。它可以选择性地修改响应的头部、状态码、内容等内容。

通过这种方式，网络代理实现了客户端和目标服务器之间的中间层，可以对请求和响应进行拦截、修改、记录和分析。

关于whistle

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

使用whistle代理之后，客户端发起的网络请求就会被转发到whistle起的代理服务器上面，然后代理服务器再根据你配置的代理规则，将相应的请求转发到目标服务器

安装启动

Mac 或 Windows 系统可以采用一键安装：一键安装 Whistle - 掘金

whistle安装过程需要以下步骤(缺一不可)：

1. 安装Node

whistle支持v0.10.0以上版本的Node，为获取更好的性能，推荐安装最新版本的Node。

如果你的系统已经安装了v0.10.0以上版本的Node，可以忽略此步骤，直接进入安装whistle的步骤，否则：

1. Windows或Mac系统，访问Node.js，安装LTS版本的Node，默认安装即可。
2. Linux下推荐使用源码安装: 从Node官网下载最新版的Source Code(或者用wget命令下载)，解压文件(tar -xzvf node-vx.y.z.tar.gz)后进入解压后的根目录(node-vx.y.z)，依次执行./configure、./make和./make install。

可以执行一下命令查看node版本

node -v

2. 安装whistle

Node安装成功后，执行如下npm命令安装whistle （Mac或Linux的非root用户需要在命令行前面加sudo，如：sudo npm install -g whistle）

npm install -g whistle

whistle安装完成后，执行命令 whistle help 或 w2 help，查看whistle的帮助信息

w2 help

3. 启动whistle

w2 start

此命令会输出whistle代理服务器的配置页面地址

4. 配置代理

配置信息

1. 代理服务器：127.0.0.1 (如果部署在远程服务器或虚拟机上，改成对应服务器或虚拟机的ip即可)
2. 默认端口：8899 (如果端口被占用，可以在启动时通过 -p 来指定新的端口，更多信息可以通过执行命令行 w2 help (v0.7.0及以上版本也可以使用w2 help) 查看)

浏览器代理：安装浏览器代理插件，这里推荐安装Whistle 第三方插件

本地运行whistle之后，打开这个插件，在规则管理这一栏可以选择使用哪个规则进行代理，开启下方的浏览器代理状态，在这个浏览器发起的网络请求，会按照所选规则进行代理

移动端代理：以华为mate 40E为例

手机要和whistle代理服务器连接同一个Wi-Fi，在同一个子网內➡️长按wifi名称➡️点击修改网络➡️代理选择手动➡️服务器主机域名就是whistle代理服务器的域名，服务器端口就是whistle代理服务器占用的端口，默认是8899

PS: 如果配置完代理，手机无法访问，可能是whistle所在的电脑防火墙限制了远程访问whistle的端口，关闭防火墙或者设置白名单：windows 防火墙如何设置允许局域网访问本机端口-百度经验

访问配置页面

启动whistle及配置完代理后，用Chrome浏览器(由于css兼容性问题界面只支持Chrome浏览器)访问配置页面，如果能正常打开页面，whistle安装启动完毕，可以开始使用。

可以通过以下两种方式来访问配置页面：

• 方式1：域名访问 http://local.whistlejs.com/
• 方式2：通过ip+端口来访问，形式如 http://whistleServerIP:whistlePort/ e.g. http://127.0.0.1:8899
• 方式2：通过命令行参数 -P xxxx 自定义webui的端口(xxxx表示要设置的端口号)，自定义端口支持上述两种方式访问，也支持 http://127.0.0.1:xxxx

whistle的匹配模式(pattern)大体可以分成 域名、路径、正则、精确匹配、通配符匹配

规则匹配是自上而下的，如果上面匹配到相应的规则就不往下匹配了，所以代理规则从上往下匹配范围应该是越来越大的。图是我项目中用到的匹配规则, 就是将线上的https协议请求代理到本地启动的http协议请求

5. 安装根证书

安装证书请参考文档: Https · GitBook

温馨提示：手机端下载证书的两种方式，扫码或者自带浏览器访问rootca.pro都是需要先按照上述步骤打开手机代理。一个证书只能对应一个whistle代理服务器，如果想使用多个whistle代理服务器，则需要下载多个对应whistle代理服务器的证书

移动端下载证书之后，安装信任（以华为mate 40E为例）

设置➡️安全➡️更多安全设置➡️加密和凭据➡️从存储设备安装，找到下载的whistle代理证书，点击安装➡️安装完成，在用户凭据里面就能看到已安装信任的证书了

发起网络请求

通过pc浏览器或者移动端访问上述线上链接，实际访问的就是本地的资源服务了。通过network这个页面就能看到所有的网络请求，如下图说明代理成功了。没有失败的请求会报红，可以根据右侧匹配的代理规则以及代理之后的实际地址判断是否是代理错误

抓包

当然，whistle处理可以作代理解决上述问题之外，还是一个强大的抓包工具

抓包（Packet Capture）是指在计算机网络中捕获和分析网络数据包的过程。抓包工具可以截获网络通信中的数据包，并将其保存或分析以获取有关网络流量、协议交互和应用程序行为的详细信息。

抓包的作用包括：

1. 网络故障排查：抓包可以用于诊断和排查网络故障。通过分析捕获的数据包，可以确定网络中的错误、延迟、丢包等问题，并找出导致问题的原因。

2. 网络性能分析：抓包可以帮助评估和优化网络性能。通过分析数据包的延迟、带宽利用率、吞吐量等指标，可以确定网络瓶颈并采取相应的优化措施。

3. 安全分析：抓包可以用于网络安全分析和入侵检测。通过分析数据包的内容和协议交互，可以发现潜在的安全威胁、恶意行为和异常活动。

4. 协议分析：抓包可以用于研究和分析网络协议的工作原理和行为。通过观察和解析数据包，可以深入了解协议的结构、字段和通信流程。

5. 应用程序分析：抓包可以用于分析应用程序的网络通信。通过捕获应用程序的数据包，可以了解应用程序与服务器之间的交互、数据格式和通信效率。

抓包工具通常提供了丰富的功能，如过滤器、统计信息、协议解析和可视化展示，以帮助用户更好地分析和理解网络流量。常见的抓包工具还有Wireshark、tcpdump、Fiddler等。

需要注意的是，在进行抓包时，应遵守相关的法律法规和道德规范，确保在合法和合理的范围内使用抓包工具，并保护用户隐私和数据安全。

由于我项目开发目前还没有遇到需要抓包分析问题的需求，就还没有具体研究这一块能力。后续有机会遇到会继续更新，尽请期待～

参考网站：关于whistle · GitBook