本文主要讲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. systemd 管理python 程序

    [Unit] Description = test-minapp After = network.target [Service] PermissionsStartOnly = true PIDFil ...

  2. 客户端与服务端Post报文构造请求及Http Post与Get请求方法

    客户端 namespace Client.Controllers { public class HomeController : Controller { // // GET: /Home/ publ ...

  3. mysql创建数据库时设置编码方式

    CREATE DATABASE procedure_function DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

  4. 【转载】Js获取当前日期时间及其它操作

    var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getFullYear();    //获取完整的年份(4位,1 ...

  5. IE6下css常见bug处理

    1.双倍边距 如下图所示,一个样式里面既设定了“float:left:”又有“margin-left:100px:”的情况,就呈现了双倍情况.如外边距设置为100px, 而左侧则呈现出200px,解决 ...

  6. DatabaseFactory.CreateDatabase 方法操作数据库

    using Microsoft.Practices.EnterpriseLibrary.Data;using Microsoft.Practices.EnterpriseLibrary.Data.Sq ...

  7. nginx服务器部署

    nginx(“engine x”)是一个高性能的HTTP和反向代理服务器.   安装nginx Linux下  sudo apt-get install nginx windows下 下载 nginx ...

  8. codeblocks设置当前行高亮

    默认是不开启当前行高亮的. 如果想打开,选择:Settings>Editor>Editor Settings>Other options> 勾选Highlight line u ...

  9. hdu5802 Windows 10 贪心

    Windows 10 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  10. 创建Spring Boot项目的几种方式总结

    一.我们可以使用Spring Initializr来创建SpringBoot项目. Spring Initializr从本质上来说就是一个Web应用程序,它能为你生成Spring Boot项目结构.虽 ...