【技术干货】使用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
636 0
|
开发工具 git Windows
经验:停止 cherry-pick,请开始 merge!
cherry-pick 是一个比较常用的 git 操作,可以将一个分支上的 commit “精选”到另一个分支上。然而在最近的开发过程中,却时不时的遇到 merge 冲突。在下文中,我将会详细的分析 cherry-pick 造成冲突的原因,以及 cherry-pick 可能造成的其他更严重问题。
8456 0
经验:停止 cherry-pick,请开始 merge!
|
1月前
|
人工智能 安全 测试技术
全栈开发者必备:AI全流程研发实战技巧与案例分享全栈开发者必备
很多开发者对AI编程的印象还停留在写片段、补代码,但真正落地到团队项目、需求评审、架构设计、Code Review全链路时,大多AI都显得“水土不服”。最近深度实践了AI全流程研发模式,结合行业实践与真实项目落地,聊一聊如何把AI从“辅助写代码”变成覆盖需求→设计→开发→审查的工程化研发助力。
502 3
|
1月前
|
前端开发 网络安全
tmux 终端效率提升 300% 的实战指南
本文手把手教你从零掌握tmux:解决多终端切换痛点,详解安装配置、鼠标支持、vi模式、核心快捷键(Ctrl+a+c/n/p/"/%/o等),并提供可复用的自动化脚本,助你1个终端高效管理多个项目,远程断连不丢工作,效率提升300%!
|
机器学习/深度学习 算法 安全
随机性、熵与随机数生成器:解析伪随机数生成器(PRNG)和真随机数生成器(TRNG)
随机性在密码学、仿真和机器学习等领域中至关重要,本文探讨了随机性、熵的概念以及伪随机数生成器(PRNG)和真随机数生成器(TRNG)的原理和应用。PRNG通过算法生成看似随机的序列,适用于高效需求;TRNG利用物理过程生成真正随机数,适用于高安全需求。文章还讨论了两者的协同应用及其面临的挑战。
1162 5
随机性、熵与随机数生成器:解析伪随机数生成器(PRNG)和真随机数生成器(TRNG)
|
6月前
|
人工智能 双11
🔥【限时福利】手慢无!阿里云百炼 × 电商卖家专属福利来啦!🔥
双11备战利器!一键生成AI电商Agent,3分钟打造吸睛主图与短视频,提升转化率。参与即有机会赢限量搪瓷杯、笔记本好礼,更有20元千万Tokens优惠包助力创作,奖品仅剩60+份,速来抢占流量先机!
327 1
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
774 0
|
JSON 人工智能 前端开发
前端开发中使用whistle代理工具
Whistle是一款强大的代理工具,相比Charles、Fiddler更轻量且功能丰富。它适用于前端开发中的多种场景,如接口数据Mock、接口代理、静态资源代理等。通过简单的规则配置,可将接口指向本地JSON文件,解决跨域问题,或代理静态资源以满足特定域名访问需求。此外,Whistle还支持本地端口间转发与移动端请求抓包,搭配SwitchyOmega插件使用效果更佳。需注意,使用前请确保已安装Node环境并参考官方文档完成基础配置。
|
存储 缓存 算法
JDK11升级后竟让内存利用率飙升到90%以上?
本文记录了作者升级到JDK11后,使用G1GC导致内存利用率飙升至90%以上的问题及其解决方案。