Gulp的代理转发插件

需求背景

前后端分开部署时,需要单独为前端启动一个服务,如果使用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‘);

原文地址:https://www.cnblogs.com/both-eyes/p/12588168.html

时间: 2024-10-10 17:02:09

Gulp的代理转发插件的相关文章

windows下使用密钥登录Linux及xshell代理转发

1.密钥登录原理 一般我们使用xshell访问远程主机(Linux主机)时,都是先请管理员给我们开一个账户,即为我们设置一个一个用户名和对应的密码,然后我们就可以使用下面的方式登录到远程主机了: 在这种情况下,我们使用的是上面密码登录,也就是说只要知道你这个账号及密码的人都可以在任何地方登录到远程主机,因此安全性较低. 使用密钥登录则不同,他使用的是上图中的public key方式登录,这种方式涉及到一个加密算法RSA,这个算法先生成一个密钥对(公钥和私钥), 我们提供自己的公钥给远程主机,在登

(转)基于live555的流媒体代理转发服务器

对于并发量并不大而且对性能要求不是很高的流媒体传输模块,live555还是很好的选择,下面说一下我所实现的流媒体代理服务器(目前只能实现对H264单视频的转发)代理转发主要 对于并发量并不大而且对性能要求不是很高的流媒体传输模块,live555还是很好的选择,下面说一下我所实现的流媒体代理服务器(目前只能实现对H264单视频的转发) 代理转发主要分为对RTSP的转发与对RTP的转发(没有实现对rtcp的转发),尽量做到不破坏原有程序框架,所以还是要将整个代理过程融合于ServerMediaSub

基于live555的流媒体代理转发服务器

参考: 1,基于live555的流媒体代理转发服务器 http://blog.csdn.net/xiejiashu/article/details/7380897 2,linux 下基于jrtplib库的实时传送实现 http://general.blog.51cto.com/927298/328224

windows下apache代理转发tomcat

一.apache2.4代理转发tomcat7 通过http_proxy做tomcat的端口转发: 描述:将远程服务器映射到本地服务器的URL空间 语法:ProxyPass [路径] !|url [键=值键=值 ...]] [nocanon] 上下文:server config, virtual host, directory 状态:扩展 模块:mod_proxy 配置httpd.conf: #保证以下模块加载 LoadModuleproxy_module modules/mod_proxy.so

IIS充当代理转发请求到Kestrel

接着上篇博文为ASP.NetCore程序启用SSL的code,这篇将介绍如何用IIS充当反向代理的角色转发请求到Kestrel服务器 与ASP.NET不同,ASP.netCore使用的是自托管web服务器Kestrel,所以IIS目前对于ASP.netCore只充当转发请求的代理而已,转发代理就需要iis安装之前没有的模称为:AspNetCoreModule,此模块包含在ANCM(官网说明:ANCM)中,下载地址:.NET Core Windows Server Hosting 在开始IIS代理

基于haproxy-1.5.12版本的http层负载均衡代理转发,附带测试效果

--前期环境部署: haproxy  192.168.64.129 nginx   192.168.64.129 client  192.168.64.128 (1.在server端口添加4个虚拟机 [haproxy和nginx共用一台服务器,不同端口] [[email protected] ~]# tree -n /usr/local/nginx/conf/conf.d/ /usr/local/nginx/conf/conf.d/ ├── bbs.example.com.8000.conf ├

【前端】CentOS 7 系列教程之五: 安装最新版 nginx 并设置 nginx 代理转发 node 服务

转载请注明出处:http://www.cnblogs.com/shamoyuu/p/linux_5.html 进入/usr/local目录 cd /usr/local 下载最新版的ngxin压缩包 wget http://nginx.org/download/nginx-1.13.9.tar.gz 解压 tar -zxvf nginx-1.13.9.tar.gz 删除压缩包 rm -f nginx-1.13.9.tar.gz 进入nginx目录准备安装 cd nginx-1.13.9 使用默认配

enginx 代理转发 wcf接口

前言 以前对比过enginx和其他几个web服务器(IIS,Apache,lighttpd)的处理静态文件的能力,enginx是最好的,甚至超过其他的几倍. 虽说enginx官方声明在Windows上的表现不如Linux等OS,经过测试enginx的异步处理和响应真出乎意料. 正文 测试的目的和思路: 后台接口用wcf,json作为请求和响应的类型,HTTP协议. 纯前端用angular及路由,enginx作为web服务器. 凡请求后台接口enginx都代理转发到wcf处理. 测试上下文: Fi

Android知识体系梳理笔记三:动态代理模式---插件加载机制学习笔记

静态代理模式 静态代理模式就是我们常说的代理设计模式,我们采用一个代理类调用原有的方法,且对产生的结果进行控制:举个例子:我们现在在玩一款网络游戏,需要打怪升级:太累就找个代理吧,一觉醒来就会发现我们已经当上CEO,迎娶白富美,天下第一了! 本来我们只能打怪,打怪-,但经过代理类增强,我们不仅可以打怪,还可以升级拿装备.就这样子了! 上代码: * 同一功能接口 public interface PlayNetGame { String beatMonster(); } 1 2 3 4 1 2 3