如何使用http-proxy-middleware将特定路径代理到指定主机

根本原因 #

http-proxy-middleware 的规则匹配遵循先声明先命中的优先级，你当前把覆盖范围更广的 /api 前缀规则放在了更精确的 /api/user/logout 特定路径规则之前，所有带 /api 前缀的请求都会先命中第一条规则转发到8080，永远不会触发第二条规则。

修正方案 #

调整两条代理规则的声明顺序，将路径更具体、匹配范围更小的规则放在前面：

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

module.exports = function(app) {
  // 先放精确匹配的特定路径规则
  app.use('/api/user/logout', createProxyMiddleware({ target: 'http://localhost:9091', changeOrigin: true, }))
  // 再放范围更广的前缀匹配规则
  app.use('/api', createProxyMiddleware({ target: 'http://localhost:8080', changeOrigin: true, }));
};

注意事项 #

修改setupProxy.js后需要重启React开发服务，新的代理配置才会生效。

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