【技术干货】使用whistle进行前后端联调

简介: 在开发的过程中经常会进行前后端先约定定义接口,然后前后端独立开发,最后进行联调。过程中可能前端先完成开发,此时后端就可以借助前端开发好的页面白屏验证研发的接口与业务逻辑;可能后端先完成开发,前端就可以配置后端地址,直接验证页面逻辑,这里面主要的关键点就在于如何将页面的api请求自定义转发到期望的后端地址以及进行相关的转发逻辑配置。

Whistle

文档

基于Node实现的跨平台web调试代理工具,类似的工具有Windows平台上的Fiddler,主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应,也可以作为HTTP代理服务器使用,不同于Fiddler通过断点修改请求响应的方式,whistle采用的是类似配置系统hosts的方式,一切操作都可以通过配置实现,支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式,且可以通过Node模块扩展功能。

安装

mac

# x84

brew install whistle && w2 start --init


# arm64

brew install node && npm i -g whistle && w2 start --init

通用

# 需要先安装node 14及以上版本

# 安装node https://nodejs.org/

npm i -g whistle && w2 start --init

使用

浏览器 http://127.0.0.1:8899/

配置rule样例

# 将https://api.yunqiao.work/flow的 所有请求都转发到本地8080端口并配置请求的header带上用户相关信息,返回的header允许跨域

https://api.yunqiao.work/flowhttp://127.0.0.1:8080  reqHeaders://{req.header} resHeaders://{res.header}

```req.header

user.id: 1

user.name: test

```


```res.header

access-control-allow-credentials: true

access-control-allow-origin: https://daily.yunqiao.work

access-control-expose-headers: DNT, Content-disposition, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Range

w2: true

```

更多【帮助文档

代理

系统级代理

# 命令行运行

w2 proxy

更多【帮助文档

浏览器级代理

全局代理如果会影响到某些客户端的请求,也可以使用浏览器插件设置代理(只对 浏览器 生效):

浏览器安装SwitchyOmega插件

选择 Whistle 代理

目录
相关文章
|
缓存 前端开发 JavaScript
【第22期】 一文读懂前端调试利器whistle
【第22期】 一文读懂前端调试利器whistle
429 0
|
9月前
|
JSON 人工智能 前端开发
前端开发中使用whistle代理工具
Whistle是一款强大的代理工具,相比Charles、Fiddler更轻量且功能丰富。它适用于前端开发中的多种场景,如接口数据Mock、接口代理、静态资源代理等。通过简单的规则配置,可将接口指向本地JSON文件,解决跨域问题,或代理静态资源以满足特定域名访问需求。此外,Whistle还支持本地端口间转发与移动端请求抓包,搭配SwitchyOmega插件使用效果更佳。需注意,使用前请确保已安装Node环境并参考官方文档完成基础配置。
|
1月前
|
人工智能 双11
🔥【限时福利】手慢无!阿里云百炼 × 电商卖家专属福利来啦!🔥
双11备战利器!一键生成AI电商Agent,3分钟打造吸睛主图与短视频,提升转化率。参与即有机会赢限量搪瓷杯、笔记本好礼,更有20元千万Tokens优惠包助力创作,奖品仅剩60+份,速来抢占流量先机!
214 1
|
2月前
|
人工智能 算法 开发者
一个提示词模板,搞定抖音短视频脚本创作
专为技术人打造的抖音脚本提示词模板,结构化拆解短视频创作套路,结合DeepSeek、通义千问等AI工具,快速生成可执行脚本框架,助力技术分享、产品演示高效落地,30秒讲清重点,开头抓人、节奏紧凑、完播率提升。
1274 12
|
10月前
|
存储 缓存 算法
JDK11升级后竟让内存利用率飙升到90%以上?
本文记录了作者升级到JDK11后,使用G1GC导致内存利用率飙升至90%以上的问题及其解决方案。
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
646 0
|
安全 Linux 虚拟化
minos 2.1 中断虚拟化——ARMv8 异常处理
越往后,交叉的越多,大多都绕不开 ARMv8 的异常处理,所以必须得先了解了解 ARMv8 的异常处理流程 先说一下术语,从手册中的用词来看,在 x86 平台,一般将异常和中断统称为中断,在 ARM 平台,一般将中断和异常统称为异常
352 3
minos 2.1 中断虚拟化——ARMv8 异常处理
|
存储 缓存 资源调度
shamefully-hoist = true
shamefully-hoist = true
869 0
|
前端开发
css动画效果代码淡入淡出折叠展开点击悬浮
css动画效果代码淡入淡出折叠展开点击悬浮