前端开发中使用whistle代理工具

代理工具有很多像‌比较有名的Charles、‌Fiddler,最近发现了一款宝藏代理工具whistle,看到团队中有很多人在用,刚开始还有点不太理解,前端我们一般代理接口解决跨域这些不都是直接在webpack、vite中配置代理规则就行了。

直到使用了whistle之后发现真香,提供的功能也比较强大,下面就分享几个在前端开发中实际使用的场景。

注意需要依赖本地node环境,谷歌浏览器中一般会配合SwitchyOmega插件来使用,具体的一些基础配置可以参考whistle官方文档。

接口数据mock

开发中如果后端接口还未开发完,往往需要我们自己mock接口数据,利用whistle可以很方便地将项目中某个接口代理到本地的json文件,这样想要什么数据我们直接修改json文件就行了。

还比如测试环境中某个接口挂了导致整体流程没法往下走,后端一时半会还处理不好,我们就可以直接将出问题的接口代理成本地的json文件中的数据,让使用流程能顺畅往下走。

ruby 复制代码
cafe123.cn/api/user file:///c:/Users/cafehaus/Desktop/user.json

本地放在桌面上的user.json文件

json 复制代码
{
    "name": "ZHOU",
    "age": 18
}

接口代理

接口代理在日常开发中比较常用,一般用来临时解决跨域问题,可以用来代替webpack、vite中的devServer配置,或者直接调用后端开发本地起的服务:

bash 复制代码
127.0.0.1:8080/api/ www.cafe123.cn

前端静态资源代理

这个一般是项目中某些场景限定了只能特定的域名才能访问,比如公共的统一登录只能配置了的白名单域名才能访问,那我们本地开发时直接用localhost、127.0.0.1下去访问就会报错,这个时候我们就可以把项目中的接口请求地址设置成特定的域名,然后域名下的js、css、html、png...这些静态资源代理到本地服务上,这样就能实现访问的前端代码还是本地的:

bash 复制代码
/cafe123.cn/.*?.(html|js|css|png|jpg)/ http://127.0.0.1:3000

移动端请求抓包

移动端项目需要在手机上调试或排查问题时,也是可以用whistle来实现代理抓包。不过这个一般测试用得比较多,配置相对复杂一点,具体可以参考whistle官方文档。

本地 localhost 127.0.0.1 不同端口之间代理

在whistle的代理面板中默认是看不到127.0.0.1、localhost的请求的,但在实际开发中我们有可能需要转发一个本地服务的需求,这个时候就需要从127.0.0.1:xxxx代理到127.0.0.1:zzzz,如果你直接在whistle中按这样的端口配置代理会发现是没用的,并不能将本地某个端口代理到另一个端口上。

解决办法是需要修改一下浏览器SwitchyOmega插件的不代理地址列表配置:

bash 复制代码
# 默认是
127.0.0.1
::1
localhost

# 需要修改成下面的(注意直接清空默认的设置实测也是没有效果的)
<-loopback>
相关推荐
泷羽Sec-静安15 分钟前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
小时前端27 分钟前
虚拟DOM已死?90%内存节省的Vapor模式正在颠覆前端
前端·html
Keepreal49628 分钟前
Web Components简介及如何使用
前端·javascript·html
进击的野人31 分钟前
JavaScript变量声明的前世今生:从var到let/const的演进
javascript
jump68035 分钟前
TS中 unknown 和 any 的区别
前端
无羡仙43 分钟前
AI终于‘看见’网页了!Stagewise让UI修改从‘盲调’变‘指哪打哪
前端
柯腾啊1 小时前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
沙漠之皇1 小时前
ts 定义重复对象字段
前端
HashTang2 小时前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
Cory.眼2 小时前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信