http-proxy-middleware

概述

這是設置代理的神器,webpack的devServer.proxy就是使用了很是強大的 http-proxy-middleware 包。Node.js代理很簡單。 輕鬆配置代理中間件進行鏈接,發佈,瀏覽器同步等等。
代理 /api 向 http://www.example.org請求html

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

var app = express();

app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));
app.listen(3000);

// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar

注意:需設置changeOrigin = turewebpack

安裝

$ npm install --save-dev http-proxy-middleware

核心概念

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

var apiProxy = proxy('/api', {target: 'http://www.example.org'});
//                   \____/   \_____________________________/
//                     |                    |
//                   context             options

// 'apiProxy' is now ready to be used as middleware in a server.

context: 定義哪些請求要被目標主機代理
options.target:目標主機 (協議+主機名)
也能夠使用簡寫配置
proxy('http://www.example.org:8000/api');
等價於 proxy('/api', {target: 'http://www.example.org:8000'});git

context匹配規則

提供另外一種方法來決定應該代理哪些請求; 若是沒法使用服務器的路徑參數來設置代理,那麼就須要更多的靈活性。github

  • 匹配路徑

proxy({...}) - 匹配全部路徑,全部請求都被代理.
proxy('/', {...}) - 匹配全部路徑,全部請求都被代理.
proxy('/api', {...}) - 匹配路徑 /apiweb

  • 多個路徑匹配

proxy(['/api', '/ajax', '/someotherpath'], {...}) - context是個數組,匹配 /api, /ajax, /someotherpath 路徑ajax

  • 通配符路徑匹配

注,一個星''只能匹配當前層級的任意字符,匹配任意的多級路徑則需用兩個:'*'
能夠訪問 micromatch 或者 glob 查看更多通配符的例子
proxy('**', {...}) 匹配全部路徑,全部請求都被代理.
proxy('*/.html', {...}) 匹配全部以 .html 爲結尾的路徑
proxy('/*.html', {...}) 匹配以 .html 結尾的絕對路徑
proxy('/api/*/.html', {...}) 匹配在 /api 路徑下的,且以 .html 結尾的路徑
proxy(['/api/', '/ajax/'], {...}) combine multiple patterns
proxy(['/api/', '!/bad.json'], {...}) exclusion正則表達式

選項(options)

option.pathRewrite: 重寫目標的url路徑,key用正則表達式來匹配路徑
注,路徑太長時,能夠用這個選項設置,方便後期調用接口express

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

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

// 添加基礎路徑
pathRewrite: {'^/' : '/basepath/'}

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

暫時用到這麼多,更多選項查看https://github.com/chimurai/h...npm

相關文章
相關標籤/搜索