Gulp的代理转发插件

Posted 2021-03-03 both-eyes

需求背景

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

1 gulp-connect-proxy

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];
        }
    });
});

如果要访问的是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‘);