whistle配置反代理调试 whistle配置反代理调试

whistle使用手册：
http://wproxy.org/whistle/ins...
whistle安装配置
whistle安装前需要先安装node环境
第一步： npm install -g whistle
第二步启动：w2 start
第三步：PC端打开本地IP:8899 下面这个是我的：
http://10.8.12.107:8899/
第四步：点击create 随便输入一个名字

文章图片

第五步：添加如下信息，服务器链接都不要加http，然后点击save

文章图片

本地服务器和测试服务器，哪个写在前面都行
如果想要注释掉此行，前面加“#”
第六步：手机设置代理

文章图片

第七步：打开app或者浏览器，访问test-licai.essence.com.cn:81，会发现执行的是你电脑上本地的代码（只要这台手机访问（无论是app还是浏览器）test-licai.essence.com.cn:81，都会重定向到10.8.12.107:1441）
【有时候修改代码保存后手机查看效果不是实时的，要清下缓存重新进入】
【电脑关机启动后需要先运行w2 start，把whistle启动】
【如果不成功，可以排查下是否app限制无法抓包，因为ios和android可以一句代码限制代理抓包】
如果是HTTPS请求
HTTPS抓包和http抓包不一样的地方是HTTPS抓包电脑和手机要安装证书
（1）电脑安装根证书

文章图片

（2）下载完根证书后点击rootCA.crt文件，弹出根证书安装对话框
（安装证书 > 当前用户 > 将所有证书放入下列存储 > 浏览 > 受信任的根证书颁发机构）
(3) 手机上安装根证书
ios:
(连代理）Safari 地址栏输入 rootca.pro，安装证书。
*设置-描述文件–安装证书
*关于本机–证书信任设置–信任证书
Andriod:
（连代理）浏览器扫描HTTPS二维码，下载即可（#浏览器地址栏 rootca.pro 按提示安装也可）
如OPPO手机：
*设置–其他设置–设备与隐私–从存储设备安装证书
如华为：
设置—安全和隐私—更多安全设置—加密和凭据—从存储设备安装—找到下载的证书命名
！！打开HTTPS–Capture tunnel connectts就可以抓取https了！！
打开whistle下的network,看到这个说明HTTPS已经代理到本地了：

文章图片

mac使用whistle抓pc包（mac配置系统代理）：
第一步：

文章图片

第二步：

文章图片

第三步：

文章图片

第四步：

文章图片

第五步：
浏览器访问这个链接，能在network板块看到请求记录：

文章图片

【配置系统代理后，没有在rules中配置的请求，将正常去请求线上的，在rules中有配置的请求，将截取后重定向到配置的地址】
修改接口请求返回内容--mock
第一步：

文章图片

https://sit-mfsapp.axzq.com.c... resBody://{queryFundSort.json}
第二步：在values中配置queryFundSort.json

文章图片

文章图片

没设置rules前，拿到正常访问接口的返回的body，可以复制，不用手动一个一个打字

文章图片

第三步：可以看到有设置rules的请求，是蓝色粗体字

文章图片

使用whistle的mock的好处--对比vue工程中的mock：

增加或者修改rules配置后不需要重启
可以修改请求入参
可以模拟接口异常情况
whistle不需要mock.deserver.js，mock-config.js这些配置文件，也不需要占用mock-data这样的文件夹来存放数据
whistle的配置都是文档形式的，看过去一眼可见的，不会藏到各个菜单的各个配置里

修改post接口请求参数
第一步：

文章图片

https://sit-mfsapp.axzq.com.c... reqMerge://(fundCode=580008&fundSource=1)
第二步：可以看到这个接口原始请求470021这个产品，经过whistle截取修改后请求的是580008这个产品

文章图片

文章图片

第三步：Get请求，修改请求参数的方法不一样，应该是：https://sit-mfsapp.axzq.com.c... urlParams://(themeFundConfigId=BA69E867C8DF439EE0533260020ADD01)，但是不确定，没有验证过
延迟接口请求

文章图片

https://sit-mfsapp.axzq.com.c... reqDelay://3000
【3000是指3000毫秒=3秒】
联调前测试接口通不通--测试接口
第一步：找到随便一条请求记录，拖到“Composer”窗口中

文章图片

第二步：根据需要修改参数，点击“Execute”，在会话列表中记录模拟请求记录

文章图片

接口转发到某后台同事的本地服务
第一步：
rules中配置：
http://10.97.250.67:1238/msps... 10.97.244.116:8081
http://10.97.250.67:1238/msps... 10.97.244.116:8081/msps-fstore
两种配置都行
第一个地址是我本地的，第二个是某个后台同事的

文章图片

第二步：可以看到所有msps-fstore请求拦截后转发了，蓝色粗体字

文章图片

解决跨域请求问题
第一步：跨域被拦截的表现

文章图片

第二步：
rules中配置：
https://sit-mfsapp.axzq.com.c... resCors://*
https://sit-mfsapp.axzq.com.c... resCors://use-credentials

文章图片

第三步：对比配置前后请求头的差别，多了两个属性：
access-control-allow-credentials true
access-control-allow-origin https://sit-licai.axzq.com.cn:81

文章图片

文章图片

Charles fiddler whistle 对比区别
【whistle配置反代理调试】1.charles也能实现whistle这种在app壳子里运行本地代码这个功能。
2.charles是付费的，可以免费试用3个月，3个月后也能使用，只是每次使用时间限制为半小时。
3.fiddler是免费开源软件。
4.mac 不能使用fiddler。所以一般是mac 用charles/whistle，window用fiddler/whistle
5.Hbuild能实现app内运行本地代码并能够断点调试，但还未实践