whistle 项目代理的基本使用

·  阅读 46

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第2天,点击查看活动详情

前言

公司的项目开发的时候需要进行代理,和之前的开发方式有点不太一样,感觉有点不太习惯。这篇文章主要是简单梳理一下关于项目代理的内容,还不是特别熟悉。

一、项目代理是什么?

2abb9d19cdb8bb00a6177ce35fecc21f.png

二、为什么要进行项目代理?

一般的开发过程,npm run start 就可以启动项目进行开发和调试。

这是因为有些web应用集中度比较高,web应用正常运行所需的代码都在一个项目中,只要把这个项目运行起来,web应用就可以正常运行。

但是应用的代码分布在多个项目中,把这些项目全部都在本地运行起来是不太现实的,所以需要通过代理,把需要进行调试的一部分代码代理到本地进行调试。

三、怎么进行项目代理?

项目代理用的是 whistle + Proxy SwitchyOmega

这里 whistle 起到的就是上图中代理服务器的作用,Proxy SwitchyOmega 是一个 Chrome 插件,一个代理设置工具。

具体操作可见:whistle 安装启动

1.  安装 whistle

$ npm install -g whistle
复制代码

2. 启动 whistle

$ w2 start
复制代码

image2022-7-28_14-43-54.png

3. 安装 Proxy SwitchyOmega

访问Google网上应用商店 Proxy SwitchyOmega 

或者 点击获取离线安装文件

SwitchyOmega_Chromium.zip

4. 配置代理

配置信息

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

配置代理方式

  1. 打开 Proxy SwitchyOmega,点击插件图标 → 选项

image2022-7-28_14-21-59.png

image2022-7-28_14-11-10.png

2. 新增一个情景模式 whistle

image2022-7-28_14-5-48.png

3. 配置代理信息

image2022-7-28_14-13-2.png

4. 切换代理情景模式

image2022-7-28_14-21-2.png

执行到第三点,whistle代理的情景模式就配置好了,通过点击插件图标 → whistle 就可以通过 whistle 进行代理了。

这个时候虽然请求通过 whistle 进行代理了但是还没有生效更新请求的效果,因为还没有配置 whistle 代理规则。

对于没有匹配上 代理规则 的请求, whistle 会把请求原封不动地进行转发。
(这里还没有配置 whistle 代理规则 ,自然也就匹配不上)

5. 配置 whistle 代理规则

访问 whistle 的配置页面

image2022-7-28_14-43-54.png

启动 whistle ,访问 whistle 的配置页面

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

可以通过以下几种方式来访问配置页面:

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

最简单的就是按照 cli 提示,访问 http://127.0.0.1:8899

whistle 配置页面

whistle 配置页面的左侧导航栏分别是

network:记录代理过程中的抓包数据

rules:配置转发请求的具体规则

values:定义配置文件中可能会用到的变量(类似postman中的environment变量)

plugins:定义扩展插件

(1)rules

点击 Create 添加 Rule记录,然后在编辑区编辑具体的 匹配规则。

基本遵循 pattern operatorURI 的模式匹配,具体的配置方式参考官方文档 配置方式

编辑完成后保存,双击Rule记录使规则生效(Rule记录后面有绿色的勾号)

这里的每一条记录可以理解为一个处理函数Fn

输入源请求preUrl,Fn(preUrl) => newUrl,Fn进行匹配和转换输出新请求newUrl

(2)values

配置key-value的数据,在Rules里面配置可以通过{key}获取,如:www.ifeng.com file://{key}

(3)network

记录代理过程中的抓包数据,查看请求响应的详细信息及请求列表的Timeline,还有请求匹配到的规则。

(4)plugins

显示所有已安装的插件列表,开启关闭插件功能,打开插件的管理页面等。

四、 whistle的强大功能

image2022-7-28_16-20-13.png

五、 一些常见问题的记录

1. 代理没有生效的原因排查 

  • whistle 服务是否启动
  • 浏览器是否切换为 whistle 代理模式
  • 代理规则是否应用
  • Rules匹配规则是否保存
  • Rules匹配规则是否正确

2. 浏览器提示无网络连接

一般是因为浏览器切换了 whistle 代理模式,但是 whistle 服务并没有启动。

大部分的情况是关机的时候 whistle 服务关闭,但是 浏览器 没有从 whistle 代理模式切换回正常模式,下次开机之后打开浏览器提示无网络连接。

解决方法:浏览器切换回正常模式,或者启动 whistle 服务。

3. 配置 Https 请求代理

解决方法:Https

4. 如何应用多个Rules

默认情况下是单个Rule生效,可以通过配置让多个Rules生效。

解决方法:点击 Rules → Setting → 勾选 Use multiple rules 

image2022-7-28_15-41-27.png

分类:
前端
收藏成功!
已添加到「」, 点击更改