NProxy
2015-06-21

Why NProxy

SPA(Single Page Application)时代,大部分编码工作转移到了前端工程师手里,不过还是免不了要调用服务端的 API。

通常情况下,这些 API 是后端工程师开发的,部署在服务器上。而前端工程师的代码是在自己的开发用机上编写,调试时要先把本地写好的代码部到服务器上,像这样:

为什么不在本机直接调试,而要把前端代码也部署到服务器上?一个原因就是跨域。不允许跨域是浏览器为了安全加的限制,却给开发带来了不便。NProxy 就是用来解决这一问题的利器。有了 NProxy,前端的开发流程就可以像这样:

原理很简单,就是把远程的地址映射成本地的地址。对你写的程序而言,它以为自己真的已经部署在服务器上,因为程序中所有的地址都是真实的服务器端地址(静态资源地址、动态接口地址)。而事实上,经过 NProxy 在中间偷梁换柱,一部分地址(通常是静态资源地址)被替换成本地地址,这一过程对浏览器是透明的,所以不会有跨域问题。

类似的工具有很多,为什么选择 NProxy?下面是 NProxy 的作者列出的与竞品的对照表,尽管有点王婆卖瓜的意思。其实还有很重要的一点作者没有提,就是 NProxy 是免费的,而且开源(MIT license)。如果要在团队中使用,跨平台和免费是很重要的考量。

How to Use NProxy

NProxy 的安装步骤不复杂, 下面图上讲的很清楚。

第五步设置代理在这里就略过了,网上很多资料。除此之外,唯一需要折腾的是第三步:准备一个配置文件。这个配置文件里写的是一条条映射规则。pattern 是一个正则表达式,用来匹配页面端请求的地址,responder 是要映射到的目标地址。

module.exports = [
  {
    pattern: /http:\/\/localhost:8080\/api\/(.*)/,
    responder:  'http://example.com/api/$1'
  }
];

注意上面例子中 responder 值里的 $1 指的是正则表达式匹配到的第一个组,也就是 http://localhost:8080/api/ 后面的全部内容。有了这条规则,我们就可以完全在本地调试,API 的地址也指向 localhost,但实际上本机并没有 API 部署,而是通过 NProxy 映射到真正的服务器上。

上面说的是网页的静态资源都在你的本机上,将服务端的真实 API 伪装成在本机上以解决跨域问题。还有一个需求场景是,网站已经上线,你想修改一两个 js 或 css 文件看看效果,但又不敢妄动线上的代码。遇到这种情况,可以用本机的文件来伪装成是线上的。

你可以替换某一个文件:

也可以替换一个目录下所有的文件:

如果你的线上代码是合并过的,还可以用本地的多个文件来替换。它还有另外一个用处,线上压缩过的代码出了脚本错误不好调试,用本地未压缩过的代码替换后就方便调试了。

最后分享一个最简单也最常用的配置:

  {
    pattern: /10.31.16.248/, // 服务器地址
    responder:  '/Users/chao/project' // 本地路径
  }

只要在本地 project 能找到的就用本地的,找不到的则用服务器上的,非常智能。比如一个 API 在本地没有,则会自动向服务器发起请求。

参考资料:

END