一篇讀懂http-proxy-middleware(轉載)

戴巨集兵發表於2018-10-25
HTTP


用於把請求代理轉發到其他伺服器的中介軟體。

簡介

例如：我們當前主機為http://localhost:3000/，現在我們有一個需求，如果我們請求/api，我們不希望由3000來處理這個請求，而希望由另一臺伺服器來處理這個請求怎麼辦？

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

var app = express();

app.use('/api', proxy({target: 'http://localhost:3001/', changeOrigin: true}));
app.listen(3000);
複製程式碼

現在，我們利用express在3000埠啟動了一個小型的伺服器，利用了app.use('/api', proxy({target: 'http://localhost:3001/', changeOrigin: true}));這句話，使發到3000埠的/api請求轉發到了3001埠。即請求http://localhost:3000/api相當於請求http://localhost:3001/api。

安裝

$ npm install --save-dev http-proxy-middleware
複製程式碼

核心概念

proxy中介軟體配置

proxy([context,] config)
var proxy = require('http-proxy-middleware');

var apiProxy = proxy('/api', {target: 'http://www.example.org'});
//                   \____/   \_____________________________/
//                     |                    |
//                需要轉發的請求           目標伺服器

// 'apiProxy' 現在已經準備作為一箇中介軟體了。
複製程式碼
  • options.target: target 由協議和主機組成
proxy(uri [, config])
// 上例的簡潔寫法
var apiProxy = proxy('http://www.example.org/api');
複製程式碼

舉例

// 引用依賴
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);
複製程式碼

上下文匹配

假如你不能使用主機的路徑引數來建立代理，或者你需要更靈活的方式來建立代理的話，這裡提供了選擇性的方式來決定哪些請求會被轉發；

 foo://example.com:8042/over/there?name=ferret#nose
 \_/  \______________/\_________/ \_________/ \__/
  |           |            |            |       |
協議          主機         路徑          查詢     碎片
複製程式碼
  • 路徑匹配
    • proxy({...})：匹配任何路徑，所有請求將被轉發；
    • proxy('/', {...}) ：匹配任何路徑，所有請求將被轉發；
    • proxy('/api', {...})：匹配/api開頭的請求
  • 多重匹配
    • proxy(['/api', '/ajax', '/someotherpath'], {...})
  • 萬用字元路徑匹配
    細粒度的匹配可以使用萬用字元匹配，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
  • 自定義匹配
    /**
 * @return {Boolean}
 */
var filter = function (pathname, req) {
    return (pathname.match('^/api') && req.method === 'GET');
};

var apiProxy = proxy(filter, {target: 'http://www.example.org'})
複製程式碼

選項

http-proxy-middleware options

  • option.pathRewrite：物件/函式，重寫目標url路徑
// 重寫
pathRewrite: {'^/old/api' : '/new/api'}

// 移除
pathRewrite: {'^/remove/api' : ''}

// 新增
pathRewrite: {'^/' : '/basepath/'}

// 自定義
pathRewrite: function (path, req) { return path.replace('/api', '/base/api') }
複製程式碼
  • option.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';
}
複製程式碼

http-proxy 事件

參照：http-proxy events

  • 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



相關文章