前端开发中使用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>
相关推荐
知识分享小能手36 分钟前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
清灵xmf1 小时前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
文火冰糖的硅基工坊1 小时前
[光学原理与应用-480]:《国产检测设备对比表》
前端·人工智能·系统架构·制造·半导体·产业链
excel1 小时前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_446260851 小时前
Django - 让开发变得简单高效的Web框架
前端·数据库·django
蓝莓味的口香糖2 小时前
【JS】什么是单例模式
开发语言·javascript·单例模式
ObjectX前端实验室3 小时前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart3 小时前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级3 小时前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang3 小时前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构