tonglin0325的个人主页

代理前端请求到本地服务

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

1.安装whistle#

1
2
3
4
5
6
7
8
9
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

启动

1
2
3
4
5
6
7
8
9
10
11
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.浏览器安装SwitchyOmega插件#

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

并将改proxy启动

3.代理前端请求#

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

1
2
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/