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）可以設置為通配符

細粒度的匹配可以使用通配符匹配，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