HTTP代理中间件中Path Rewrite功能失效问题排查

问题描述 #

使用createProxyMiddleware创建用户API代理，配置target为http://localhost:4000、开启changeOrigin、设置pathRewrite规则为'^/users-api': '/api/users'，并将代理挂载到/users-api路由。但发起GET /users-api请求时，日志显示转发地址为http://localhost/，未访问4000端口且请求失效；直接将target设为http://localhost:4000/api/users时功能正常。

相关代码 #

// Create proxy middleware for users API
const usersProxy = createProxyMiddleware({
    target: 'http://localhost:4000',
    changeOrigin: true,
    pathRewrite: {
        '^/users-api': '/api/users'
    },
    on: {
        proxyReq: (proxyReq, req, res) => {
            proxyReq.setHeader('X-Proxy-Service', 'users');
            const targetUrl = `${proxyReq.protocol}//${proxyReq.host}${proxyReq.path}`;
            console.log('Users Proxy - Original URL:', req.originalUrl);
            console.log('Users Proxy - Forwarding to:', targetUrl);
        },
        proxyRes: (proxyRes, req, res) => {
            proxyRes.headers['x-proxied-by'] = 'users-proxy';
        },
        error: (err, req, res) => {
            console.error('Users Proxy Error:', err);
            res.status(500).json({ 
                error: 'Users Proxy Error', 
                message: err.message 
            });
        }
    }
});
// Apply proxy middlewares to specific routes
app.use('/users-api',usersProxy);

请求日志 #

GET /users-api
Users Proxy - Original URL: /users-api
Users Proxy - Forwarding to: http://localhost/
it is not even hitting 4000
if i do like
target: 'http://localhost:4000/api/users',
directly set target this works fine

问题原因 #

1. 路由挂载与pathRewrite规则不匹配：当代理挂载到/users-api路由时，代理实际接收到的请求路径是去掉前缀后的空字符串，而配置的'^/users-api': '/api/users'规则仅匹配以/users-api开头的路径，无法匹配当前空路径，导致路径重写失效，代理只能将空路径转发到目标地址。
2. 日志打印逻辑缺陷：proxyReq.host返回的是不带端口的主机名（HTTP协议的Host头默认不包含标准端口），因此日志显示的地址缺失端口，但核心问题还是路径重写失效导致请求未正确转发。

解决办法 #

方法一：调整pathRewrite规则匹配代理接收的路径 #

由于代理接收到的是空路径，修改pathRewrite规则匹配空字符串：

const usersProxy = createProxyMiddleware({
    target: 'http://localhost:4000',
    changeOrigin: true,
    pathRewrite: {
        '^$': '/api/users' // 匹配代理接收的空路径，替换为目标接口路径
    },
    // 其他on钩子配置保持不变
});
app.use('/users-api', usersProxy);

方法二：取消路由挂载前缀，让代理直接处理原始路径 #

将代理直接挂载到全局，pathRewrite规则匹配原始请求的完整路径前缀：

const usersProxy = createProxyMiddleware({
    target: 'http://localhost:4000',
    changeOrigin: true,
    pathRewrite: {
        '^/users-api': '/api/users' // 匹配原始请求的完整路径前缀
    },
    // 其他on钩子配置保持不变
});
app.use(usersProxy); // 不指定路由前缀，由代理自行处理路径匹配

可选：修正日志打印逻辑 #

如果需要正确打印包含端口的目标地址，可以从代理配置的target中解析端口信息：

proxyReq: (proxyReq, req, res) => {
    proxyReq.setHeader('X-Proxy-Service', 'users');
    // 从代理配置的target中解析完整地址信息
    const targetUrlObj = new URL(usersProxy.options.target);
    const targetUrl = `${targetUrlObj.protocol}//${targetUrlObj.host}${proxyReq.path}`;
    console.log('Users Proxy - Original URL:', req.originalUrl);
    console.log('Users Proxy - Forwarding to:', targetUrl);
}

内容的提问来源于stack exchange，提问作者user-usman