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 随便输入一个名字
whistle配置反代理调试
文章图片

第五步:添加如下信息,服务器链接都不要加http,然后点击save
whistle配置反代理调试
文章图片

本地服务器和测试服务器,哪个写在前面都行
如果想要注释掉此行,前面加“#”
第六步:手机设置代理
whistle配置反代理调试
文章图片

第七步:打开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)电脑安装根证书
whistle配置反代理调试
文章图片

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

mac使用whistle抓pc包(mac配置系统代理):
第一步:
whistle配置反代理调试
文章图片

第二步:
whistle配置反代理调试
文章图片

第三步:
whistle配置反代理调试
文章图片

第四步:
whistle配置反代理调试
文章图片

第五步:
浏览器访问这个链接,能在network板块看到请求记录:
whistle配置反代理调试
文章图片

【配置系统代理后,没有在rules中配置的请求,将正常去请求线上的,在rules中有配置的请求,将截取后重定向到配置的地址】
修改接口请求返回内容--mock
第一步:
whistle配置反代理调试
文章图片

https://sit-mfsapp.axzq.com.c... resBody://{queryFundSort.json}
第二步:在values中配置queryFundSort.json
whistle配置反代理调试
文章图片

whistle配置反代理调试
文章图片

没设置rules前,拿到正常访问接口的返回的body,可以复制,不用手动一个一个打字
whistle配置反代理调试
文章图片

第三步:可以看到有设置rules的请求,是蓝色粗体字
whistle配置反代理调试
文章图片

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

  1. 增加或者修改rules配置后不需要重启
  2. 可以修改请求入参
  3. 可以模拟接口异常情况
  4. whistle不需要mock.deserver.js,mock-config.js这些配置文件,也不需要占用mock-data这样的文件夹来存放数据
  5. whistle的配置都是文档形式的,看过去一眼可见的,不会藏到各个菜单的各个配置里
修改post接口请求参数
第一步:
whistle配置反代理调试
文章图片

https://sit-mfsapp.axzq.com.c... reqMerge://(fundCode=580008&fundSource=1)
第二步:可以看到这个接口原始请求470021这个产品,经过whistle截取修改后请求的是580008这个产品
whistle配置反代理调试
文章图片

whistle配置反代理调试
文章图片

第三步:Get请求,修改请求参数的方法不一样,应该是:https://sit-mfsapp.axzq.com.c... urlParams://(themeFundConfigId=BA69E867C8DF439EE0533260020ADD01),但是不确定,没有验证过
延迟接口请求
whistle配置反代理调试
文章图片

https://sit-mfsapp.axzq.com.c... reqDelay://3000
【3000是指3000毫秒=3秒】
联调前测试接口通不通--测试接口
第一步:找到随便一条请求记录,拖到“Composer”窗口中
whistle配置反代理调试
文章图片

第二步:根据需要修改参数,点击“Execute”,在会话列表中记录模拟请求记录
whistle配置反代理调试
文章图片

接口转发到某后台同事的本地服务
第一步:
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
两种配置都行
第一个地址是我本地的,第二个是某个后台同事的
whistle配置反代理调试
文章图片

第二步:可以看到所有msps-fstore请求拦截后转发了,蓝色粗体字
whistle配置反代理调试
文章图片

解决跨域请求问题
第一步:跨域被拦截的表现
whistle配置反代理调试
文章图片

第二步:
rules中配置:
https://sit-mfsapp.axzq.com.c... resCors://*
https://sit-mfsapp.axzq.com.c... resCors://use-credentials
whistle配置反代理调试
文章图片

第三步:对比配置前后请求头的差别,多了两个属性:
access-control-allow-credentials true
access-control-allow-origin https://sit-licai.axzq.com.cn:81
whistle配置反代理调试
文章图片

whistle配置反代理调试
文章图片

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内运行本地代码并能够断点调试,但还未实践

    推荐阅读