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

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

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

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

接口数据mock

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

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

cafe123.cn/api/user file:///c:/Users/cafehaus/Desktop/user.json

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

{
    "name": "ZHOU",
    "age": 18
}

接口代理

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

127.0.0.1:8080/api/ www.cafe123.cn

前端静态资源代理

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

/cafe123.cn\/.*?\.(html|js|css|png|jpg)/ http://127.0.0.1:3000

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

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

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

# 默认是
127.0.0.1
：：1
localhost

# 需要修改成下面的（注意直接清空默认的设置实测也是没有效果的）
<-loopback>

移动端请求抓包

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