使用http-middle-ware中间件进行多个接口请求转发

        最近遇到公司的一些项目，是纯静态的不用编译的普通项目，由于前端会跨域，这些项目他们原来是使用Nginx做服务器，然后进行请求的代理转发。但是由于我之前没有怎么接触过Nginx，一些配置基本上都不是很懂，每次都要去搜一下配置方法。所以我自己就是用express框架去做一个服务器，然后进行请求的代理转发。

        首先需要准备的是，express框架，然后就是http-proxy-middleware这个中间件，最后就是把你的静态项目放到express的public目录下（因为我是使用express-generator脚手架生成的，public是存放静态文件目录）

       之前利用express框架使用http-proxy-middleware去转发请求，都是只是转发到同一个目标服务器，因为普通页面的请求也就一两三个，都跑到同一服务器了。现在一个页面有多个请求，请求到不同服务器。故需要对原来的转发配置代码进行一些简单的修改，以适应开发需求。

        我们知道在vue脚手架生成的项目中，webpack-dev-server也是可以进行代理转发的，它也是利用http-proxy-middleware进行代理转发的，如果你有用过这个，那么上手http-proxy-middleware这个中间件也是比较容易的，因为一般就只用到那几个字段进行配置，而且配置方法基本一模一样。

        在webpack的官网文档中，最简单的代理转发例子是这样子的

 当时因为vue项目的接口都是跑到同一个服务器域名下，所以这里总是设置一个服务器转发规则，也没有去注意到多写几个就是多几条转发到不同服务器的规则。受到这个启发，我在想把以前http-proxy-middleware的转发配置给改改，变成类似vue脚手架这里的可配置多条规则的配置文件。我的思路很简单，就是写个配置文件，然后在express的主文件（app.js）里面循环遍历配置文件信息，然后就可以实现转发多个配置规则的转发服务器。有了这个思路那么就可以来写一个简单的配置文件了。

        先贴上转发列表的代码，有用过应该可以理解，如下：

// proxy.config_list.js
var proxy_config = {
    test: [
        {
            from: '/example1',              // 请求
            target: 'localhost:3100',       // 目标服务器
            changeOrigin: true,             // 默认false，是否需要改变原始主机头为目标URL
        },
        {
            from: '/example2',
            target: 'localhost:3101',
            changeOrigin: true,
        },
        {
            from: '/example3',
            target: 'localhost:3102',
            changeOrigin: true,
        },
        {
            from: '/example4',
            target: 'localhost:3103',
            changeOrigin: true,
        }
    ]
}

// 这里只是增加了请求的console打印而已
let data = proxy_config.test
let output = []
for (let i = 0; i < data.length; i++) {
    let p = {
        from: data[i].from,
        target: data[i].target,
        changeOrigin: data[i].changeOrigin,
        onProxyReq: function (proxyReq, req, res) {
            console.log('来自：', getIp(req), '的转发请求：', req.method, req.url, req.hostname)
        }
    }
    p.pathRewrite = {}
    p.pathRewrite['^' + data[i].from] = '/'
    output.push(p)
}

// 获取来自请求主机的ip
var getIp = function(req) {
    var ip = req.headers['x-real-ip'] ||
        req.headers['x-forwarded-for'] ||
        req.socket.remoteAddress || '';
    if(ip.split(',').length>0){
        ip = ip.split(',')[0];
    }
    return ip;
}

module.exports = output

接下来是在app.js里面的循环遍历配置文件的操作，如下：

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');


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

// 引用代理转发配置
var myProxyConfig = require('./proxy.config_list.js')
// use proxy
for (let j = 0; j < myProxyConfig.length; j++) {
    let myProxy = proxy(myProxyConfig[j])
    app.use(myProxyConfig[j].from, myProxy)
}

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

        基本上上面的代码一看就能明白，了解了思路自己搞一遍也就懂了，也不是什么很难的问题。就是一些小技巧帮助自己在开发过程中解决一些简单的问题而已。若有更好的办法，可以告诉我一下，学习学习。