http-proxy-middleware使用方法和实现原理(源码解读)
本文主要讲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)可以设置为通配符
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
// 重写
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使用方法和实现原理(源码解读)的更多相关文章
- Spring:源码解读Spring IOC原理
Spring IOC设计原理解析:本文乃学习整理参考而来 一. 什么是Ioc/DI? 二. Spring IOC体系结构 (1) BeanFactory (2) BeanDefinition 三. I ...
- Spring源码解读Spring IOC原理
一.什么是Ioc/DI? IoC 容器:最主要是完成了完成对象的创建和依赖的管理注入等等. 先从我们自己设计这样一个视角来考虑: 所谓控制反转,就是把原先我们代码里面需要实现的对象创建.依赖的代码,反 ...
- Vue 源码解读(3)—— 响应式原理
前言 上一篇文章 Vue 源码解读(2)-- Vue 初始化过程 详细讲解了 Vue 的初始化过程,明白了 new Vue(options) 都做了什么,其中关于 数据响应式 的实现用一句话简单的带过 ...
- SharedPreferences 原理 源码 进程间通信 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- Webpack探索【16】--- 懒加载构建原理详解(模块如何被组建&如何加载)&源码解读
本文主要说明Webpack懒加载构建和加载的原理,对构建后的源码进行分析. 一 说明 本文以一个简单的示例,通过对构建好的bundle.js源码进行分析,说明Webpack懒加载构建原理. 本文使用的 ...
- Webpack探索【15】--- 基础构建原理详解(模块如何被组建&如何加载)&源码解读
本文主要说明Webpack模块构建和加载的原理,对构建后的源码进行分析. 一 说明 本文以一个简单的示例,通过对构建好的bundle.js源码进行分析,说明Webpack的基础构建原理. 本文使用的W ...
- 2,MapReduce原理及源码解读
MapReduce原理及源码解读 目录 MapReduce原理及源码解读 一.分片 灵魂拷问:为什么要分片? 1.1 对谁分片 1.2 长度是否为0 1.3 是否可以分片 1.4 分片的大小 1.5 ...
- 第二十三课:jQuery.event.add的原理以及源码解读
本课主要来讲解一下jQuery是如何实现它的事件系统的. 我们先来看一个问题: 如果有一个表格有100个tr元素,每个都要绑定mouseover/mouseout事件,改成事件代理的方式,可以节省99 ...
- Laya Timer原理 & 源码解析
Laya Timer原理 & 源码解析 @author ixenos 2019-03-18 16:26:38 一.原理 1.将所有Handler注册到池中 1.普通Handler在handle ...
随机推荐
- systemd 管理python 程序
[Unit] Description = test-minapp After = network.target [Service] PermissionsStartOnly = true PIDFil ...
- 客户端与服务端Post报文构造请求及Http Post与Get请求方法
客户端 namespace Client.Controllers { public class HomeController : Controller { // // GET: /Home/ publ ...
- mysql创建数据库时设置编码方式
CREATE DATABASE procedure_function DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
- 【转载】Js获取当前日期时间及其它操作
var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1 ...
- IE6下css常见bug处理
1.双倍边距 如下图所示,一个样式里面既设定了“float:left:”又有“margin-left:100px:”的情况,就呈现了双倍情况.如外边距设置为100px, 而左侧则呈现出200px,解决 ...
- DatabaseFactory.CreateDatabase 方法操作数据库
using Microsoft.Practices.EnterpriseLibrary.Data;using Microsoft.Practices.EnterpriseLibrary.Data.Sq ...
- nginx服务器部署
nginx(“engine x”)是一个高性能的HTTP和反向代理服务器. 安装nginx Linux下 sudo apt-get install nginx windows下 下载 nginx ...
- codeblocks设置当前行高亮
默认是不开启当前行高亮的. 如果想打开,选择:Settings>Editor>Editor Settings>Other options> 勾选Highlight line u ...
- hdu5802 Windows 10 贪心
Windows 10 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
- 创建Spring Boot项目的几种方式总结
一.我们可以使用Spring Initializr来创建SpringBoot项目. Spring Initializr从本质上来说就是一个Web应用程序,它能为你生成Spring Boot项目结构.虽 ...