携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
前言
公司的项目开发的时候需要进行代理，和之前的开发方式有点不太一样，感觉有点不太习惯。这篇文章主要是简单梳理一下关于项目代理的内容，还不是特别熟悉。
一、项目代理是什么？
二、为什么要进行项目代理？
一般的开发过程，npm run start 就可以启动项目进行开发和调试。
这是因为有些web应用集中度比较高，web应用正常运行所需的代码都在一个项目中，只要把这个项目运行起来，web应用就可以正常运行。
但是应用的代码分布在多个项目中，把这些项目全部都在本地运行起来是不太现实的，所以需要通过代理，把需要进行调试的一部分代码代理到本地进行调试。
三、怎么进行项目代理？
项目代理用的是 whistle + Proxy SwitchyOmega
这里 whistle 起到的就是上图中代理服务器的作用，Proxy SwitchyOmega 是一个 Chrome 插件，一个代理设置工具。
具体操作可见：whistle 安装启动
1. 安装 whistle
$ npm install -g whistle
2. 启动 whistle
$ w2 start
3. 安装 Proxy SwitchyOmega
访问Google网上应用商店 Proxy SwitchyOmega
或者 点击获取离线安装文件
4. 配置代理
配置信息
- 代理服务器：127.0.0.1 (如果部署在远程服务器或虚拟机上，改成对应服务器或虚拟机的ip即可)
- 默认端口：8899 (如果端口被占用，可以在启动时通过
-p来指定新的端口，更多信息可以通过执行命令行w2 help(v0.7.0及以上版本也可以使用w2 help) 查看)
配置代理方式
- 打开 Proxy SwitchyOmega，点击插件图标 → 选项
2. 新增一个情景模式 whistle
3. 配置代理信息
4. 切换代理情景模式
执行到第三点，whistle代理的情景模式就配置好了，通过点击插件图标 → whistle 就可以通过 whistle 进行代理了。
这个时候虽然请求通过 whistle 进行代理了但是还没有生效更新请求的效果，因为还没有配置 whistle 代理规则。
对于没有匹配上 代理规则 的请求， whistle 会把请求原封不动地进行转发。
（这里还没有配置 whistle 代理规则 ，自然也就匹配不上）
5. 配置 whistle 代理规则
访问 whistle 的配置页面
启动 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的强大功能
五、 一些常见问题的记录
1. 代理没有生效的原因排查
- whistle 服务是否启动
- 浏览器是否切换为 whistle 代理模式
- 代理规则是否应用
- Rules匹配规则是否保存
- Rules匹配规则是否正确
2. 浏览器提示无网络连接
一般是因为浏览器切换了 whistle 代理模式，但是 whistle 服务并没有启动。
大部分的情况是关机的时候 whistle 服务关闭，但是 浏览器 没有从 whistle 代理模式切换回正常模式，下次开机之后打开浏览器提示无网络连接。
解决方法：浏览器切换回正常模式，或者启动 whistle 服务。
3. 配置 Https 请求代理
解决方法：Https
4. 如何应用多个Rules
默认情况下是单个Rule生效，可以通过配置让多个Rules生效。
解决方法：点击 Rules → Setting → 勾选 Use multiple rules
