gulp-connect-proxy和http-proxy-middleware代理

需求背景：前后端分开部署时，需要单独为前端启动一个服务，如果使用gulp-connect的话，那么代理需要额外的插件来配置。首先说下为什么需要代理，gulp-connect是静态web的server(就是只能访问静态页面)，如果需要向另外一个或几个服务器请求数据那么就需要代理。除非前后端一起部署，不然由于浏览器的限制是没办法跨域请求数据的。即便是前后端部署在一起，如果还需要向其他服务请求数据，或者需要其他服务(检索，缓存等服务)，而这些服务通常是独立部署的，那么还是需要代理的。

当然常见的有几种方法来实现跨域访问，代理只是其中的一种也是最常用的一种方法。一些服务器(例如Nginx)本身就具备代理的功能，如果选择gulp-connect来起服务的话，那么就要额外选择代理插件了，下面介绍主要的两种gulp插件：

1. gulp-connect-proxy使用比较简单，例如http://www.jianshu.com/p/9a63b22edcd2，网上的资料也比较少。

var Proxy = require('gulp-connect-proxy');
var connect = require('gulp-connect');

gulp.task("serverName", function () {
    connect.server({
        root: "api",
        port: 8000,
        livereload: true,
        middleware: function (connect, opt) {
            opt.route = '/proxy';
            var proxy = new Proxy(opt);
            return [proxy];
        }
    });
});

关于gulp-connect可以看一下http://blog.csdn.net/xyjawq1/article/details/54234330。通过gulp serverName启动server，在这个服务中就可以使用代理了。但是使用的时候只能通过下面的方式：

如果要访问的是localhost:8080/pages，那么现在需要用localhost:8000/proxy/localhost:8080/pages，就是在实际要访问的资源前面加上代理服务器的IP+Port以及用opt.route设置的前缀。例如前端ajax代码可能是这样写

return $http.get(

  'http://localhost:8000/proxy/external.host.com:8080/pages', 

  { params: { queryText: "music"} }
);

external.host.com是外部服务的域名/IP。

那么问题来了，这种把外部服务和本地服务地址都写在代码中的方式无疑很难维护的。

2. http-proxy-middleware是另外一个gulp代理的插件，使用方法官方介绍的也比较详细。下面是我简单使用的例子

var connect = require('gulp-connect');
var proxy = require('http-proxy-middleware');

gulp.task('serverName', function() {
    connect.server({
        root: ['path'],
        port: 8000,
        livereload: true,
        middleware: function(connect, opt) {
            return [
                proxy('/api',  {
                    target: 'http://localhost:8080',
                    changeOrigin:true
                }),
                proxy('/otherServer', {
                    target: 'http://IP:Port',
                    changeOrigin:true
                })
            ]
        }

    });
});

这个例子中配置将要访问的/api请求都转发到http://localhost:8080中去了，而/otherServer的请求就会被转发到http://IP:Port中去，如果需要其他服务就在这里添加就行了，一定要配置个路径参数像'/api','/otherServer'一样，如果设置成'/'那么所有的请求都会被转发到此处配置的target上去。而你代码中的请求根本不用关心请求被转发到哪里去了，只需要按自己的需要进行请求，这个代理会根据不同的请求选择正确的服务进行转发。因此很好维护。而且也很好移植，如果想换个代理服务器(通常是要换的)，那么只要去配这个代理服务器就好了，代码完全不用动。

gulp代理插件有很多，去github上搜就行了，这里只是我使用过程中用到的两个，可能还有更好用的。但是其实够用就行了，最后部署上线时，出于安全可靠，性能等考虑，通常还是会选择Ngix的。但是开发阶段尽可能选个可以快速满足需求的就行了。把主要的精力放在应用开发上，而不是在工具配置上。我也是摸着石头过河，有误之处请多多指证。