http-proxy-middleware使用方法和实现原理（源码解读 摘）
本文主要讲http-proxy-middleware用法和实现原理。
一 简介
http-proxy-middleware用于后台将请求转发给其它服务器。
例如：我们当前主机A为http://localhost:3000/，现在浏览器发送一个请求，请求接口/api，这个请求的数据在另外一台服务器B上（http://10.119.168.87:4000），这时，就可通过在A主机设置代理，直接将请求发送给B主机。
简单实现代码如下：
1 var express = require('express');
2 var proxy = require('http-proxy-middleware');
3
4 var app = express();
5
6 app.use('/api', proxy({target: 'http://10.119.168.87:4000', changeOrigin: true}));
7 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。
二 安装
1 $ npm install --save-dev http-proxy-middleware
三 用法和接口说明
proxy([context,] config)
1 var proxy = require('http-proxy-middleware');
2
3 var apiProxy = proxy('/api', {target: 'http://www.example.org'});
4 // \____/ \_____________________________/
5 // | |
6 // 需要转发的请求 目标服务器
说明：第一个参数是可以省略的。
下边示例是用Express构建的服务器中用法：
1 // 引用依赖
2 var express = require('express');
3 var proxy = require('http-proxy-middleware');
4
5 // proxy 中间件的选择项
6 var options = {
7 target: 'http://www.example.org', // 目标服务器 host
8 changeOrigin: true, // 默认false，是否需要改变原始主机头为目标URL
9 ws: true, // 是否代理websockets
10 pathRewrite: {
11 '^/api/old-path' : '/api/new-path', // 重写请求，比如我们源访问的是api/old-path，那么请求会被解析为/api/new-path
12 '^/api/remove/path' : '/path' // 同上
13 },
14 router: {
15 // 如果请求主机 == 'dev.localhost:3000',
16 // 重写目标服务器 'http://www.example.org' 为 'http://localhost:8000'
17 'dev.localhost:3000' : 'http://localhost:8000'
18 }
19 };
20
21 // 创建代理
22 var exampleProxy = proxy(options);
23
24 // 使用代理
25 var app = express();
26 app.use('/api', exampleProxy);
27 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）可以设置为函数（自定义配置规则）
1 /**
2 * @return {Boolean}
3 */
4 var filter = function (pathname, req) {
5 return (pathname.match('^/api') && req.method === 'GET');
6 };
7
8 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详解
1 // proxy 中间件的选择项
2 var config= {
3 target: 'http://www.example.org', // 目标服务器 host
4 changeOrigin: true, // 默认false，是否需要改变原始主机头为目标URL
5 ws: true, // 是否代理websockets
6 pathRewrite: {
7 '^/api/old-path' : '/api/new-path', // 重写请求，比如我们源访问的是api/old-path，那么请求会被解析为/api/new-path
8 '^/api/remove/path' : '/path' // 同上
9 },
10 router: {
11 // 如果请求主机 == 'dev.localhost:3000',
12 // 重写目标服务器 'http://www.example.org' 为 'http://localhost:8000'
13 'dev.localhost:3000' : 'http://localhost:8000'
14 }
15 };
16
17 // 创建代理
18 var exampleProxy = proxy(config);
1）target
用于设置目标服务器host。
2）changeOrigin
默认false，是否需要改变原始主机头为目标URL。
3）ws
设置是否代理websockets。4）pathRewrite
1 // 重写
2 pathRewrite: {'^/old/api' : '/new/api'}
3
4 // 移除
5 pathRewrite: {'^/remove/api' : ''}
6
7 // 添加
8 pathRewrite: {'^/' : '/basepath/'}
9
10 // 自定义
11 pathRewrite: function (path, req) { return path.replace('/api', '/base/api') }
5）router
重写指定请求转发目标。
1 // 使用主机或者路径进行匹配，返回最先匹配到结果
2 // 所以配置的顺序很重要
3 router: {
4 'integration.localhost:3000' : 'http://localhost:8001', // host only
5 'staging.localhost:3000' : 'http://localhost:8002', // host only
6 'localhost:3000/api' : 'http://localhost:8003', // host + path
7 '/rest' : 'http://localhost:8004' // path only
8 }
9
10 // 自定义
11 router: function(req) {
12 return 'http://localhost:8004';
13 }
3.3 事件
http-proxy-middleware还提供了一些请求监听事件。
- option.onError:
1 // 监听proxy的onerr事件
2 proxy.on('error', function (err, req, res) {
3 res.writeHead(500, {
4 'Content-Type': 'text/plain'
5 });
6
7 res.end('Something went wrong. And we are reporting a custom error message.');
8 });
- option.onProxyRes：监听proxy的回应事件
1 proxy.on('proxyRes', function (proxyRes, req, res) {
2 console.log('RAW Response from the target', JSON.stringify(proxyRes.headers, true, 2));
3 });
- option.onProxyReq：监听proxy的请求事件
1 proxy.on('proxyReq', function onProxyReq(proxyReq, req, res) {
2 proxyReq.setHeader('x-added', 'foobar');
3 });
- option.onProxyReqWs：
1 function onProxyReqWs(proxyReq, req, socket, options, head) {
2 proxyReq.setHeader('X-Special-Proxy-Header', 'foobar');
3 }
- option.onOpen：监听来自目标服务器的信息
1 proxy.on('open', function (proxySocket) {
2 proxySocket.on('data', hybiParseAndLogMessage);
3 });
- option.onClose：展示websocket链接分离
1 proxy.on('close', function (res, socket, head) {
2 console.log('Client disconnected');
3 });
四 实现原理和源码解读
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封装，使用起来更加方便简单。
浙公网安备 33010602011771号