本文主要讲http-proxy-middleware用法和实现原理。

一 简介

http-proxy-middleware用于后台将请求转发给其它服务器。

例如:我们当前主机A为http://localhost:3000/,现在浏览器发送一个请求,请求接口/api,这个请求的数据在另外一台服务器B上(http://10.119.168.87:4000),这时,就可通过在A主机设置代理,直接将请求发送给B主机。

简单实现代码如下:

 var express = require('express');
var proxy = require('http-proxy-middleware'); var app = express(); app.use('/api', proxy({target: 'http://10.119.168.87:4000', changeOrigin: true}));
app.listen(3000);

说明:我们利用express在3000端口启动了一个小型的服务器,利用了app.use('/api', proxy({target: 'http://10.119.168.87:4000/', changeOrigin: true}))这句话,使发到3000端口的/api请求转发到了4000端口。即请求http://localhost:3000/api相当于请求http://10.119.168.87:4000/api

二 安装

 $ npm install --save-dev http-proxy-middleware

三 用法和接口说明

proxy([context,] config)

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

 var apiProxy = proxy('/api', {target: 'http://www.example.org'});
// \____/ \_____________________________/
// | |
// 需要转发的请求 目标服务器

说明:第一个参数是可以省略的。

下边示例是用Express构建的服务器中用法:

 // 引用依赖
var express = require('express');
var proxy = require('http-proxy-middleware'); // proxy 中间件的选择项
var options = {
target: 'http://www.example.org', // 目标服务器 host
changeOrigin: true, // 默认false,是否需要改变原始主机头为目标URL
ws: true, // 是否代理websockets
pathRewrite: {
'^/api/old-path' : '/api/new-path', // 重写请求,比如我们源访问的是api/old-path,那么请求会被解析为/api/new-path
'^/api/remove/path' : '/path' // 同上
},
router: {
// 如果请求主机 == 'dev.localhost:3000',
// 重写目标服务器 'http://www.example.org' 为 'http://localhost:8000'
'dev.localhost:3000' : 'http://localhost:8000'
}
}; // 创建代理
var exampleProxy = proxy(options); // 使用代理
var app = express();
app.use('/api', exampleProxy);
app.listen(3000);

3.1 参数一[context]详解

下边是一个完整地址划分:

foo://example.com:8042/over/there?name=ferret#nose
\_/ \______________/\_________/ \_________/ \__/
| | | | |
协议 主机 路径 查询 碎片

第一个参数主要设置要代理的路径,该参数具有如下用法:

1)可以省略

  • proxy({...}):匹配任何路径,所有请求将被转发;

2)可以设置为路径字符串

  • proxy('/', {...}) :匹配任何路径,所有请求将被转发;
  • proxy('/api', {...}):匹配/api开头的请求

3)可以设置为数组

  • proxy(['/api', '/ajax', '/someotherpath'], {...}) :匹配多个路径

4)可以设置为函数(自定义配置规则)

 /**
* @return {Boolean}
*/
var filter = function (pathname, req) {
return (pathname.match('^/api') && req.method === 'GET');
}; var apiProxy = proxy(filter, {target: 'http://www.example.org'})

5)可以设置为通配符

细粒度的匹配可以使用通配符匹配,Glob 匹配模式由 micromatch创造,访问 micromatch or glob 查找更多用例。

  • proxy('**', {...}) 匹配任何路径,所有请求将被转发;
  • proxy('**/*.html', {...}) 匹配任何以.html结尾的请求;
  • proxy('/*.html', {...}) 匹配当前路径下以html结尾的请求;
  • proxy('/api/**/*.html', {...}) 匹配/api下以html为结尾的请求;
  • proxy(['/api/**', '/ajax/**'], {...}) 组合
  • proxy(['/api/**', '!**/bad.json'], {...}) 不包括**/bad.json

3.2 参数二config详解

该接口是一个对象,里边包含的参数有如下:
 // proxy 中间件的选择项
var config= {
target: 'http://www.example.org', // 目标服务器 host
changeOrigin: true, // 默认false,是否需要改变原始主机头为目标URL
ws: true, // 是否代理websockets
pathRewrite: {
'^/api/old-path' : '/api/new-path', // 重写请求,比如我们源访问的是api/old-path,那么请求会被解析为/api/new-path
'^/api/remove/path' : '/path' // 同上
},
router: {
// 如果请求主机 == 'dev.localhost:3000',
// 重写目标服务器 'http://www.example.org' 为 'http://localhost:8000'
'dev.localhost:3000' : 'http://localhost:8000'
}
}; // 创建代理
var exampleProxy = proxy(config);

1)target

用于设置目标服务器host。

2)changeOrigin

默认false,是否需要改变原始主机头为目标URL。

3)ws

设置是否代理websockets。

4)pathRewrite

 重写目标url路径。
 // 重写
pathRewrite: {'^/old/api' : '/new/api'} // 移除
pathRewrite: {'^/remove/api' : ''} // 添加
pathRewrite: {'^/' : '/basepath/'} // 自定义
pathRewrite: function (path, req) { return path.replace('/api', '/base/api') }

5)router

重写指定请求转发目标。

 // 使用主机或者路径进行匹配,返回最先匹配到结果
// 所以配置的顺序很重要
router: {
'integration.localhost:3000' : 'http://localhost:8001', // host only
'staging.localhost:3000' : 'http://localhost:8002', // host only
'localhost:3000/api' : 'http://localhost:8003', // host + path
'/rest' : 'http://localhost:8004' // path only
} // 自定义
router: function(req) {
return 'http://localhost:8004';
}

3.3 事件

http-proxy-middleware还提供了一些请求监听事件。

  • option.onError:
 // 监听proxy的onerr事件
proxy.on('error', function (err, req, res) {
res.writeHead(500, {
'Content-Type': 'text/plain'
}); res.end('Something went wrong. And we are reporting a custom error message.');
});
  • option.onProxyRes:监听proxy的回应事件
 proxy.on('proxyRes', function (proxyRes, req, res) {
console.log('RAW Response from the target', JSON.stringify(proxyRes.headers, true, 2));
});
  • option.onProxyReq:监听proxy的请求事件
 proxy.on('proxyReq', function onProxyReq(proxyReq, req, res) {
proxyReq.setHeader('x-added', 'foobar');
});
  • option.onProxyReqWs:
 function onProxyReqWs(proxyReq, req, socket, options, head) {
proxyReq.setHeader('X-Special-Proxy-Header', 'foobar');
}
  • option.onOpen:监听来自目标服务器的信息
 proxy.on('open', function (proxySocket) {
proxySocket.on('data', hybiParseAndLogMessage);
});
  • option.onClose:展示websocket链接分离
 proxy.on('close', function (res, socket, head) {
console.log('Client disconnected');
});

四 实现原理和源码解读

http-proxy-middleware实际是用http-proxy库实现代理中间件功能。

1)proxy([context,] config),这步是执行了源码中HttpProxyMiddleware方法,该方法核心内容是调用httpProxy.createProxyServer()方法创建一个代理服务,并且在该方法最后返回一个middleware。

httpProxy官网:https://github.com/nodejitsu/node-http-proxy#core-concept

2)分析返回值middleware是一个函数,该函数核心是用上边创建的proxy服务返回值,调用web方法,用于转发请求。

3)app.use('/api', proxy(options)),相当于本地服务器监听到客户端请求的‘/api’接口时,执行的回到是上边的middleware中间件函数,从上边可以看出,该函数中将请求转发到代理服务器。

总结:http-proxy-middleware实际就是将http-proxy封装,使用起来更加方便简单。

参考资料&内容来源

官网:https://github.com/chimurai/http-proxy-middleware

简书:https://www.jianshu.com/p/a248b146c55a

http-proxy-middleware使用方法和实现原理(源码解读)的更多相关文章

  1. Spring:源码解读Spring IOC原理

    Spring IOC设计原理解析:本文乃学习整理参考而来 一. 什么是Ioc/DI? 二. Spring IOC体系结构 (1) BeanFactory (2) BeanDefinition 三. I ...

  2. Spring源码解读Spring IOC原理

    一.什么是Ioc/DI? IoC 容器:最主要是完成了完成对象的创建和依赖的管理注入等等. 先从我们自己设计这样一个视角来考虑: 所谓控制反转,就是把原先我们代码里面需要实现的对象创建.依赖的代码,反 ...

  3. Vue 源码解读(3)—— 响应式原理

    前言 上一篇文章 Vue 源码解读(2)-- Vue 初始化过程 详细讲解了 Vue 的初始化过程,明白了 new Vue(options) 都做了什么,其中关于 数据响应式 的实现用一句话简单的带过 ...

  4. SharedPreferences 原理 源码 进程间通信 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  5. Webpack探索【16】--- 懒加载构建原理详解(模块如何被组建&如何加载)&源码解读

    本文主要说明Webpack懒加载构建和加载的原理,对构建后的源码进行分析. 一 说明 本文以一个简单的示例,通过对构建好的bundle.js源码进行分析,说明Webpack懒加载构建原理. 本文使用的 ...

  6. Webpack探索【15】--- 基础构建原理详解(模块如何被组建&如何加载)&源码解读

    本文主要说明Webpack模块构建和加载的原理,对构建后的源码进行分析. 一 说明 本文以一个简单的示例,通过对构建好的bundle.js源码进行分析,说明Webpack的基础构建原理. 本文使用的W ...

  7. 2,MapReduce原理及源码解读

    MapReduce原理及源码解读 目录 MapReduce原理及源码解读 一.分片 灵魂拷问:为什么要分片? 1.1 对谁分片 1.2 长度是否为0 1.3 是否可以分片 1.4 分片的大小 1.5 ...

  8. 第二十三课:jQuery.event.add的原理以及源码解读

    本课主要来讲解一下jQuery是如何实现它的事件系统的. 我们先来看一个问题: 如果有一个表格有100个tr元素,每个都要绑定mouseover/mouseout事件,改成事件代理的方式,可以节省99 ...

  9. Laya Timer原理 & 源码解析

    Laya Timer原理 & 源码解析 @author ixenos 2019-03-18 16:26:38 一.原理 1.将所有Handler注册到池中 1.普通Handler在handle ...

随机推荐

  1. 经典SQL语句使用方法大全

    一.基础1.说明:创建数据库CREATE DATABASE database-name2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备份数 ...

  2. poj 2409 Let it Bead Polya计数

    旋转能够分为n种置换,相应的循环个数各自是gcd(n,i),个i=0时不动,有n个 翻转分为奇偶讨论,奇数时有n种置换,每种有n/2+1个 偶数时有n种置换,一半是n/2+1个,一半是n/2个 啃论文 ...

  3. mongoDB _id:ObjectId("xxxx")详解

     http://blog.haohtml.com/archives/10678   MongoDB ObjectId的优化  

  4. Mysql纯命令行添加用户及权限

    原文链接:http://hi.baidu.com/ngy1991/item/45978bd05d82c7ea785daa42 创建用户: 命令: 1 CREATE USER 'username'@'h ...

  5. webpack 通用环境快速搭建

    能用babel编译es2015 . 能热编译.能加载静态资源(js/css/font/image).是一个很通用的开发环境,虽然不智能.但很好扩展 npm 安装列表: # webpack 核心 npm ...

  6. Java并发编程(十三)同步容器类

    同步容器类 Vector.HashTable,我用的很少:Vecotr的实现和ArrayList挺接近的,不同的是Vector中很多的方法都用synchronized进行了同步.在不强调线程安全地时候 ...

  7. 常用校验算法CRC、MD5、SHA_转

    1.算法概述 数据摘要算法是密码学算法中非常重要的一个分支,它通过对所有数据提取指纹信息以实现数据签名.数据完整性校验等功能,由于其不可逆性,有时候会被用做敏感信息的加密.数据摘要算法也被称为哈希(H ...

  8. python之filter()函数

    filter()函数是python内置的一个高阶函数. filter()函数接受一个函数f 和一个list,这个函数f的作用是对每个元素进行判断,返回True或False,filter()根据判断结果 ...

  9. 框架应用:Mybatis - 开发详述

    ORM框架 在实际开发中,工程中本质的任务是从数据库中获取数据,然后对数据进行操作,又或者写入数据.开发时语言是大多是面向对象的工程语言,这个时候就必须进行工程语言和数据库连接语言的转换,也就是所谓的 ...

  10. Entity Framework中的主从表关系的使用

    其关系图: 我们使用Entity Framework生成映射关系如下: 其中author表中的books导航属性为一个集合,表示当前作者的书. 在页面中我们可以使用如下代码来实现: 代码中author ...