背景
我们在日常工作中应该都遇到需要与服务端联调的场景，传统一些的公司一般缺少基建，后端同学如果开发的是 HTTP 接口的话，通常会丢个 IP 地址和端口给你让你测试。
对于前端同学，可能对
DevServer 的代理转发不陌生，或者可能也用过 ModHeader 这样的浏览器插件，但往往产品同学验收 or 测试部署环境的时候就比较难受了，因为这些同学往往非研发出身，对于本地起环境或者一些高级的调试技巧是无能为力的。
正向代理服务
用过 webpack / vite 的前端小伙伴可能比较熟悉，devServer 中有一个
proxy 配置，作用是将前端请求通过本地开发服务，转发到对应的后端地址；在深入些，如果你研究过它的实现方式，你就会了解到一个叫做 http-proxy-middleware 的工具，这个工具是对 http-proxy 的一个封装，允许你在诸如 express / connect / koa 的框架中使用它。http-proxy-middleware 的应用非常广，熟悉 umi 的同学或许也接触过配置中的 proxy 插件，作用和原理是一样的。说了这么多，还是在本地折腾，有没有办法解决上面的问题，让产品/测试同学也能愉快的访问你的开发环境？
http-proxy-webui
这里就可以介绍下我近期的一点工作成果，一个正向代理服务
http-proxy-webui 。前面我们提到过，
http-proxy-middleware 是一个标准的 express / connect 中间件，那么你可以很容易的在 node 服务中集成它。http-proxy-webui 旨在解决开发环境不便于非研发人员访问不便的问题，提供了一个正向代理服务，以及代理配置的管理页面，同时支持流式日志传输，让你可以直观的看到是否正确的命中了代理。下面是一个演示视频：
这里演示的效果是，我在本地启动了一个 express 服务，运行在
http://0.0.0.0:4123 上，正向代理服务运行在 http://0.0.0.0:3000 上；在正向代理中保存如下配置：
{
"/test": {
"target": "http://127.0.0.1:4123",
"changeOrigin": true
}
}/test表示需要代理的路径，合法的 express 路由表达式均可，支持通配符；
target表示代理的目标服务，这里是本地 express 服务监听的地址；
changeOrigin表示是否修改请求头中的Origin字段；
更多配置参考 http-proxy-middleware#options
这样，我们便将
https://127.0.0.1:3000/proxy/test 的服务指向了 http://127.0.0.1:4123/test ，curl 测试下，返回符合预期：curl http://127.0.0.1:3000/proxy/test # --> hello world如何使用
现阶段，你必须本地启动这个项目，很快我会给他添加 docker 支持：
- 克隆本项目：
git clone https://github.com/Mitscherlich/http-proxy-webui.git- 安装依赖
cd http-proxy-webui && pnpm i这个项目使用了 pnpm 管理 node 依赖，请自行查阅官方文档安装。
- 启动调试服务
pnpm run dev如果看到了这样的输出，则服务启动成功
如果遇到任何与本服务有关问题，请移步 github issue 提问。
使用场景与限制
- 本项目设计之初，面向的是基建不够完善的团队（如：中小型团队，初创全队），如果你的开发团队有成熟的服务治理方案，这个项目不应该是你的首选；
- 本项目不能突破网络限制，如果你的部署环境不能访问目标 IP / 地址，则通过本服务代理同样不能访问；反之，你可以将本服务部署在可以访问目标服务的网络环境中，然后配置网关/防火墙以允许传入的连接访问到本服务，即可实现正向代理功能；
Roadmap / TODOs
支持 docker 部署
支持用户管理，支持 SAML / LDAP
支持项目/团队管理，支持权限控制
支持集群模式
如果你对本项目感兴趣，也欢迎加入本项目的开发完善工作中，你可以邮件我或者在 github 上直接提交 PR
与其他项目的关系
nginx / apache server
有过运维经验的小伙伴肯定熟悉，nginx 之类的服务也是支持正向代理模式的，但 nginx 配置复杂，且需要登录服务器远程操作，每次配置均需要 reload 服务，操作比较麻烦。
ngrok
与 ngrok 或者类似的内网穿透服务不同，内网穿透服务是将某个端口的全部流量（出入站）转发给穿透代理服务器，这种方式需要独占某个子域名 or 服务端口，同时多人调试时需要抢占。
whistle
whistle 是一个非常好用的本地代理服务，通过简单的配置即可实现请求重写、接口转发，如果你能教（说）会（服）你的产品 or 测试使用这个，那就用这个吧，前提当然是你帮他们写好代理规则。