http-proxy-middleware

用于把請(qǐng)求代理轉(zhuǎn)發(fā)到其他服務(wù)器的中間件。

簡(jiǎn)介

例如：我們當(dāng)前主機(jī)為http://localhost:3000/奉狈，現(xiàn)在我們有一個(gè)需求，如果我們請(qǐng)求/api，我們不希望由3000來處理這個(gè)請(qǐng)求，而希望由另一臺(tái)服務(wù)器來處理這個(gè)請(qǐng)求怎么辦碳柱？

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);

現(xiàn)在，我們利用express在3000端口啟動(dòng)了一個(gè)小型的服務(wù)器熬芜，利用了app.use('/api', proxy({target: 'http://localhost:3001/', changeOrigin: true}));這句話莲镣，使發(fā)到3000端口的/api請(qǐng)求轉(zhuǎn)發(fā)到了3001端口。即請(qǐng)求http://localhost:3000/api相當(dāng)于請(qǐng)求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'});
//                   \____/   \_____________________________/
//                     |                    |
//                需要轉(zhuǎn)發(fā)的請(qǐng)求           目標(biāo)服務(wù)器

// 'apiProxy' 現(xiàn)在已經(jīng)準(zhǔn)備作為一個(gè)中間件了瑞侮。

• options.target: target 由協(xié)議和主機(jī)組成

proxy(uri [, config])

// 上例的簡(jiǎn)潔寫法
var apiProxy = proxy('http://www.example.org/api');

舉例

// 引用依賴
var express = require('express');
var proxy = require('http-proxy-middleware');

// proxy 中間件的選擇項(xiàng)
var options = {
        target: 'http://www.example.org', // 目標(biāo)服務(wù)器 host
        changeOrigin: true,               // 默認(rèn)false，是否需要改變?cè)贾鳈C(jī)頭為目標(biāo)URL
        ws: true,                         // 是否代理websockets
        pathRewrite: {
            '^/api/old-path' : '/api/new-path',     // 重寫請(qǐng)求鼓拧，比如我們?cè)丛L問的是api/old-path半火，那么請(qǐng)求會(huì)被解析為/api/new-path
            '^/api/remove/path' : '/path'           // 同上
        },
        router: {
            // 如果請(qǐng)求主機(jī) == 'dev.localhost:3000',
            // 重寫目標(biāo)服務(wù)器 'http://www.example.org' 為 'http://localhost:8000'
            'dev.localhost:3000' : 'http://localhost:8000'
        }
    };

// 創(chuàng)建代理
var exampleProxy = proxy(options);

// 使用代理
var app = express();
    app.use('/api', exampleProxy);
    app.listen(3000);

上下文匹配

假如你不能使用主機(jī)的路徑參數(shù)來創(chuàng)建代理，或者你需要更靈活的方式來創(chuàng)建代理的話季俩，這里提供了選擇性的方式來決定哪些請(qǐng)求會(huì)被轉(zhuǎn)發(fā)慈缔；

 foo://example.com:8042/over/there?name=ferret#nose
 \_/  \______________/\_________/ \_________/ \__/
  |           |            |            |       |
協(xié)議          主機(jī)         路徑          查詢     碎片

• 路徑匹配
  • proxy({...})：匹配任何路徑，所有請(qǐng)求將被轉(zhuǎn)發(fā)种玛；
  • proxy('/', {...}) ：匹配任何路徑藐鹤，所有請(qǐng)求將被轉(zhuǎn)發(fā)；
  • proxy('/api', {...})：匹配/api開頭的請(qǐng)求
• 多重匹配
  • proxy(['/api', '/ajax', '/someotherpath'], {...})
• 通配符路徑匹配
  細(xì)粒度的匹配可以使用通配符匹配赂韵，Glob 匹配模式由 micromatch創(chuàng)造娱节，訪問 micromatch or glob 查找更多用例。
  • proxy('**', {...}) 匹配任何路徑祭示，所有請(qǐng)求將被轉(zhuǎn)發(fā)肄满；
  • proxy('**/*.html', {...}) 匹配任何以.html結(jié)尾的請(qǐng)求；
  • proxy('/*.html', {...}) 匹配當(dāng)前路徑下以html結(jié)尾的請(qǐng)求质涛；
  • proxy('/api/**/*.html', {...}) 匹配/api下以html為結(jié)尾的請(qǐng)求稠歉；
  • 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'})
  

選項(xiàng)

http-proxy-middleware options

• option.pathRewrite：對(duì)象/函數(shù)，重寫目標(biāo)url路徑

// 重寫
pathRewrite: {'^/old/api' : '/new/api'}

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

// 添加
pathRewrite: {'^/' : '/basepath/'}

// 自定義
pathRewrite: function (path, req) { return path.replace('/api', '/base/api') }

• option.router：對(duì)象/函數(shù)汇陆，重新指定請(qǐng)求轉(zhuǎn)發(fā)目標(biāo)

// 使用主機(jī)或者路徑進(jìn)行匹配怒炸，返回最先匹配到結(jié)果
// 所以配置的順序很重要
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:

// 監(jiān)聽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：監(jiān)聽proxy的回應(yīng)事件

proxy.on('proxyRes', function (proxyRes, req, res) {
  console.log('RAW Response from the target', JSON.stringify(proxyRes.headers, true, 2));
});

• option.onProxyReq：監(jiān)聽proxy的請(qǐng)求事件

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：監(jiān)聽來自目標(biāo)服務(wù)器的信息

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