Gulp的代理转发插件

需求背景

先后端分开部署时，须要单独为前端启动一个服务，若是使用gulp-connect的话，那么代理须要额外的插件来配置。首先说下为何须要代理，gulp-connect是静态web的server（就是只能访问静态页面），若是须要向另一个或几个服务器请求数据那么就须要代理。除非先后端一块儿部署，否则因为浏览器的限制是没办法跨域请求数据的。即使是先后端部署在一块儿，若是还须要向其余服务请求数据，或者须要其余服务（检索，缓存等服务），而这些服务一般是独立部署的，那么仍是须要代理的。

1 gulp-connect-proxy

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

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];
        }
    });
});
复制代码

若是要访问的是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 (推荐)

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上去。而你代码中的请求根本不用关心请求被转发到哪里去了，只须要按本身的须要进行请求，这个代理会根据不一样的请求选择正确的服务进行转发。所以很好维护。

Http-proxy-middleware安装报错：proxy is not a function

启动报错：proxy is not a function

后查看了http-proxy-middleware的官方文档，发现最新的1.0.0版本已经对模块的引用做了明确的要求

0.x.x版本的引用方式：

const proxy = require('http-proxy-middleware');

复制代码

1.0.0版本的引用方式

const { createProxyMiddleware } = require('http-proxy-middleware');
复制代码