代理前端请求到本地服务

1. 1.安装whistle
2. 2.浏览器安装
3. 3.代理前端请求

在开发过程中，有时候我们需要将前端的请求（当然也可以是部分请求）代理到我们的本地开发环境的服务中进行调试，下面借助whistle+SwitchyOmega来实现这个功能

1.安装whistle#

npm install whistle -g --registry=https://registry.npmmirror.com

added 130 packages in 8s
npm notice
npm notice New major version of npm available! 9.1.2 -> 10.5.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.5.0
npm notice Run npm install -g npm@10.5.0 to update!
npm notice

启动

w2 start

[i] whistle@2.9.66 started
[i] 1. use your device to visit the following URL list, gets the IP of the URL you can access:
       http://127.0.0.1:8899/
       http://192.168.8.188:8899/
       Note: If all the above URLs are unable to access, check the firewall settings
             For help see https://github.com/avwo/whistle
[i] 2. set the HTTP proxy on your device with the above IP & PORT(8899)
[i] 3. use Chrome to visit http://local.whistlejs.com/ to get started

启动后访问http://127.0.0.1:8899/界面如下

2.浏览器安装#

将proxy设置成代理到whistle的8899端口，并将127.0.0.1的本地代理限制删掉

并将改proxy启动

3.代理前端请求#

比如我们要代理https://xx.com/api/abc的接口代理到我们本地的http://127.0.0.1/api/v2/abc的服务上，这时我们应该如下配置

https://xx.com/api/abc 127.0.0.1/api/v2/abc/

如果是http协议，在启动点击OFF来启动whistle就可以实现代理功能了

如果是https协议，所以我们还需要点击HTTPS来添加HTTPS证书和勾选相关选项

参考：whistle+Proxy SwitchyOmega代理前端页面接口到本地开发服务

https://wproxy.org/whistle/