代理前端请求到本地服务
在开发过程中,有时候我们需要将前端的请求(当然也可以是部分请求)代理到我们的本地开发环境的服务中进行调试,下面借助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.浏览器安装SwitchyOmega插件
将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证书和勾选相关选项