Whistle配置与代理问题

yolo612
982 阅读7分钟

whistle是什么

是非常实用且无敌的好东西【接口联调以及容灾测试、本地开发mock代理、抓包调试】

工作中经常遇到联调前需要mock数据进行开发的时候，又或者移动端出现问题，需要抓包看数据分析情况的时候 【代理+抓包+mock的小能手】

一、安装步骤

  1. 安装whister
npm i whistle -g 全局安装
w2 start 启动服务
w2 stop 停止服务(使用率：0.1%)

2. 安装代理扩展程序***SwitchyOmega插件*********

注：若遇到程序包无效现象

需要先将crx文件添加压缩包后缀（.rar）, 再解压这个压缩包==》 得到一个文件夹；

随后将文件夹拖到道chrome浏览器中解决：

具体步骤如下：（blog.csdn.net/qq_41691212…

  1. 配置代理

首先需要在插件菜单里选择选项

再新建情景模式

whister设置如下配置：

切到刚才配置好的地址上

  1. 启动whistle

通过上面三步的操作后，该做的工作都已经搞定了，现在开始启动服务w2 start，启动成功后会看到这样的画面

  1. 安装证书并始终信任

【待完善】window安装证书时有问题？？ 如何解决

二、whistle抓移动端上的包

配置前提：需要电脑和手机处于同一个局域网中

电脑端：whistle打开并且找到当前whistle运行的ip地址与档口

手机端：

  1. 连上网络后，手动配置代理【pc端的whistle运行ip和端口】，以ios举例：

  1. 下载证书

手机浏览器输入：rootca.pro， 允许下载文件

  1. 安装信任证书

打开设置--首次下载通过设置/已描述文件进入【没有就多下载几次试试】

选中下载的描述文件输入密码安装并信任

安装成功后

增加本机的手机信任证书：ios路径：设置/通用/关于本机/证书信任设置

三、常用相关配置和基本操作

juejin.cn/post/709553…

配置代理示例：

###*** 代理成功的话network面板中请求颜色会是蓝色***###

# 1. 本地联调[域名ip映射]

http://acsp.sit.sf-express.com xxxxxx

# 2. 模拟响应 500（请求不会到后台服务）

http://xxx.sit.com/app/func1 statusCode://502

# 3. 修改响应状态码（请求会到后台服务）

test4.wproxy.org/path/to replaceStatus://400

## 302 重定向

test5.wproxy.org/path redirect://https://ke.qq.com/

## 301 重定向

test6.wproxy.org/path redirect://https://ke.qq.com/ replaceStatus://301

# 4. 拦截响应体[映射到对应文件上]

# test6.wproxy.org/path file://Users/mock/getinitialzationData.json

# test6.wproxy.org/path resBody://Users/mock/getinitialzationData.json

# 5. 拦截响应体[映射到对应value上]

test6.wproxy.org/path resBody://{getInitializationData.json}

四、whistle在本地开发中的应用

场景一：绕过登录鉴权

本地localhost开发存在的缺陷：juejin.cn/post/684490… 【文章写得很好，很清楚得分析本地开发使用代理的不足地方，还有一个流程图介绍本地代理调试的复杂步骤】

具体的本地开发使用过程：juejin.cn/post/684490… 【很详细介绍了现代前端项目结合谷歌插件SwitchyOmega结合whislte 开发的过程】

实际项目中whislte配置如何继承同步给其他同事：juejin.cn/post/684490… 【创建.whislte.js文件，通过w2 create加载到控制台】

总结：页面调试时的一部分功能，需要前端页面的特定域名支持，比如用户的登陆功能，后端接口会校验客户端域名的合法性，只处理特定的域名的请求；又比如特定域名下cookie的读取等等。这些功能在localhost的host下可能会受到限制。

导致这些不足的背后实质上是两个原因：

  1. 本地开发和线上环境的域名不一致，这就导致了业务代码参杂了环境相关的不纯洁的代码。

  2. 转发配置与webpack过于耦合，这就致使一旦环境需要变动就不得不进行项目重启。

因此解决的方案也是基于这两点:

  1. 本地开发时，浏览器中访问的是线上域名，即用线上的域名来开发和调试本地代码，做到本地代码和线上代码完全一致而不需要在代码层面做环境区分。

  2. 将接口代理功能从webpack中抽离，使用其他工具接管这部分功能，webpack不再需要因修改转发配置而重启。

image.png

image.png

总结：静态资源代理到本地，接口不代理，直接调用后端服务

四、【代理问题】本地开发环境配置是如何解决跨域

结论：服务代理

  1. 跨域问题及其解决办法

zhuanlan.zhihu.com/p/611046057…

产生跨域问题的前提是浏览器环境，代理服务器不受浏览器的限制，所以可以和远程服务器正常通信。 同时代理服务器和html网页在相同的域名、端口下，所以不存在跨域，代理服务器自然可以吧数据传给页面。

服务器之间的访问是不存在跨域问题的；postman也是

www.zhihu.com/question/62… 【为什么postman请求无跨域问题】

  1. 为什么项目中配置代理后就可以访问测试环境了

juejin.cn/post/711237… 【解释得一般，但把代理过程图画清楚了，评论有出彩】

客户端发送请求到代理服务器 =》 代理服务器 =》 代理服务器转发给目标服务器 =》 目标服务器处理请求并向代理服务器做出响应 =》 代理服务器接收响应 =》 代理服务器再把请求发送给客户端（代理服务器允许跨域请求。因为代理服务器是一个类中间件，具备一个换装功能。可以将不符合同源策略的域名伪装成符合同源策列的域名）=》 客户端检测不出跨域，处理响应。

blog.csdn.net/weixin_6096… 【这里解释得很好，解释了几种跨域的解决方案，并给出了实例，目测像是视频培训课的笔记】

非同源策略（跨域）请求方案：

  • proxy跨域代理：原理就是利用“服务器和服务器之间不存在跨域”来实现的

步骤：

（1）在本地启动一个服务：一方面可以实现页面的预览，另一方面也可以代理转发数据请求

（2）我们以后再发数据请求，发送给本地启动的这个服务，而这个服务会去真正的服务器上获取到相关的数据，再返回给客户端！！

  • 本地开发的时候，我们基于proxy跨域代理来完成「webpack-dev-server、Node...」

  • 部署到服务器的时候，我们一般是基于nginx的反向代理来处理

  • CORS跨域资源共享：默认因为浏览器的安全策略，是不允许ajax跨域访问的，但是如果服务器设置了 Access-Control-Allow-Origin 响应头信息，设置允许这个源发送请求，那么浏览器也就不在去限制了！！

实施步骤：

（1）由服务器设置允许源

Access-Control-Allow-Origin 设置允许的源「白名单机制」

Access-Control-Allow-Credentials 是否允许携带资源凭证「例如:cookie」

服务器端设置了允许，则客户端也要配合设置允许

axios.defaults.withCredentials = true;

xhr.withCredentials=true;

Access-Control-Allow-Headers 设置允许的请求头

Access-Control-Allow-Methods 设置允许的请求方式

（2）在CORS跨域共享中，客户端首先会尝试发送一个OPTIONS试探请求，验证是否连接成功，连接成功后，再发送真正的请求！！

代理相关疑问：

疑问一：前端服务不应该也是部署到一个端口下的吗？---实际可通过域名直接访问到前端项目

是部署在源服务器的端口下，访问域名，域名 可以映射【直接映射 或者通过某种方式】对应 到 对应端口下，所以就看不到端口

疑问二：为什么访问页面的时候只有域名，没有端口？是ng转发的？

  • 是的，需要配置转发，例如通过oss桶部署的前端项目，实际上访问桶资源【下面原文编辑中以后图，可自己放开】

avatar
文章
阅读
粉丝