666 的 AnyProxy

2016/11/06 | 2分钟阅读 | 更新于 2016/11/06

昨晚写完服务端的一堆接口，然后之后要跟前端部分联调一下，虽然都跑在我的电脑上，但是 webpack-dev-server 跟后端部分端口不一致啊。我打开了 Fiddler，既然开代理了，那我搞个不存在的域名，把接口相关的请求转发到 3000，把文件相关的请求转到 8080 。

然后我就发现 Fiddler 没办法按照我的期望（换 Host 和 port 不换 path）进行转发，查了下，据说 “Fiddler 只支持文件粒度的转发，不支持文件夹粒度的”。但是我需要的偏偏只是根据 path 把请求的 host 跟 port 替换掉，中间环节我都想好了，拿正则去 match url，把匹配到的部分作为变量在替换后的部分引用使用。

然后我就找了下能不能自己实现这部分，然后我就找到了一篇文章，讲了一个简单的 http 代理实现，并给出了很简短的 node 代码实现。主要就是监听请求，收到请求后把请求里面的 header，host，port 等等拿出来去发送另外一个请求。那我只要在收到请求之后判断下 path，host 等等，如果需要的话就替换掉，就可以用了，然后就是怎么优雅地实现基本的配置，然后就睡觉了。

不过早晨睡醒我就发现了另一篇文章，介绍了 anyproxy，功能很强大，扩展很便捷。比如配置文件是一个 js 文件，可以在里面定义需要的方法，像是这样：

module.exports = {
  replaceRequestOption: function (req, option) {
    var newOption = option;
    console.log(option.path);
    if (newOption.headers.host == "web.develop") {
      newOption.hostname = "127.0.0.1";
      if (/\.(jpg|jpeg|png|gif|jpeg)[#\?]?/.test(newOption.path)) {
        newOption.port = "8080";
      } else if (/\.(html|js)[#\?]?/.test(newOption.path)) {
        newOption.port = "8080";
      } else {
        newOption.port = "3000";
      }
    }
    return newOption;
  },
};

很简单的实现了我的需求，搭配 chrome 扩展 SwitchySharp 更方便。然后 anyproxy 本身不只是这点功能，具体描述见相关文档吧 …