标签：gulp 插件 http middleware Gulp connect 转发 require proxy
需求背景
前后端分开部署时，需要单独为前端启动一个服务，如果使用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');
标签：gulp,插件,http,middleware,Gulp,connect,转发,require,proxy 来源： https://www.cnblogs.com/both-eyes/p/12588168.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。