Express+http-proxy-middleware代理/api/v2接口不生效问题排查

问题描述 #

需将http://A.com的所有接口代理到http://B.com，同时修改/api/v2接口的响应头与响应数据，但针对该接口的代理配置完全未生效，proxyRes中的日志也未执行。整体代理功能正常，但/api/v2的单独配置毫无作用。

用户提供的服务器代码：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

app.use('/api/v2', createProxyMiddleware({
  target: 'http://B.com',
  changeOrigin: true,
  on: {
    proxyRes: (proxyRes, req, res) => {
      console.log('proxy res here =====');
      proxyRes.headers['x-added'] = 'foobar';
    }
  }
}));

app.use('/', createProxyMiddleware({ target: 'http://B.com', changeOrigin: true }));

// 启动服务器
const port = 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

环境信息：

• node: 14.18.3
• express: 4.18.2
• http-proxy-middleware: 2.0.6

问题原因 #

1. 路由顺序错误：Express的路由匹配是从上到下顺序执行的，兜底的app.use('/', ...)代理配置放在了/api/v2配置之后，导致所有请求（包括/api/v2开头的）都被兜底代理先捕获处理，/api/v2的精准配置根本无法触发。
2. proxyRes配置写法不符合版本规范：http-proxy-middleware v2版本中，proxyRes无需嵌套在on对象中，直接作为顶层配置项即可。

解决方法 #

步骤1：调整路由顺序 #

将精准匹配的/api/v2代理配置放在兜底代理前面，确保请求先匹配到精准规则。

步骤2：修正proxyRes配置格式 #

按照v2版本规范，将proxyRes作为代理配置的顶层属性。

步骤3：添加响应数据修改逻辑 #

若需修改响应体内容，需通过监听proxyRes的流事件，收集原始响应数据后修改，再重新发送给客户端。

修改后的完整代码 #

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

// 先配置精准匹配的/api/v2代理
app.use('/api/v2', createProxyMiddleware({
  target: 'http://B.com',
  changeOrigin: true,
  proxyRes: (proxyRes, req, res) => {
    console.log('proxy res here =====');
    // 修改响应头
    proxyRes.headers['x-added'] = 'foobar';
    
    // 修改响应数据的处理逻辑
    let bodyBuffer = [];
    proxyRes.on('data', (chunk) => {
      bodyBuffer.push(chunk);
    });
    proxyRes.on('end', () => {
      // 拼接原始响应体并解析
      const rawBody = Buffer.concat(bodyBuffer).toString();
      let modifiedBody = JSON.parse(rawBody);
      
      // 自定义修改响应数据
      modifiedBody.proxy_modified = true;
      
      // 更新响应头并发送修改后的内容
      const newBodyStr = JSON.stringify(modifiedBody);
      res.setHeader('Content-Length', Buffer.byteLength(newBodyStr));
      res.end(newBodyStr);
    });
  }
}));

// 再配置兜底的全局代理
app.use('/', createProxyMiddleware({ target: 'http://B.com', changeOrigin: true }));

// 启动服务器
const port = 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

关键注意事项 #

• Express中间件的执行顺序严格遵循挂载顺序，精准路由必须放在模糊路由之前。
• 修改响应数据时，由于proxyRes是流对象，必须通过data和end事件收集原始数据，修改后需更新Content-Length响应头，避免客户端解析异常。

内容的提问来源于stack exchange，提问作者dai