NestJS使用http-proxy-middleware时请求阻塞及空白页问题

在NestJS中使用http-proxy-middleware实现代理，将localhost:3000/dashboard的请求转发至localhost:8001，但访问该路由时显示空白页，所有GET、POST请求均无法正常处理。

1. 修正路由匹配规则 #

当前forRoutes仅匹配精确的/dashboard路径，无法覆盖/dashboard/xxx这类子路径请求，导致代理失效。修改AppModule中的路由配置：

// app.module.ts
export class AppModule {
  configure(consumer: MiddlewareConsumer) {
    consumer
      .apply(ProxyMiddleware)
      // 用通配符匹配所有/dashboard开头的路径
      .forRoutes({ path: 'dashboard*', method: RequestMethod.ALL });
  }
}

2. 调整代理中间件的响应处理逻辑 #

代理完成请求转发后无需额外调用next()，否则会中断响应流程，导致页面空白。修改ProxyMiddleware：

// proxy.middleware.ts
@Injectable()
export class ProxyMiddleware implements NestMiddleware {
  use(req: Request, res: Response, next: NextFunction) {
    const proxy = createProxyMiddleware({
      target: 'http://localhost:8001',
      changeOrigin: true,
      pathRewrite: {
        '^/dashboard': '/',
      },
      // 可选：开启日志便于调试请求转发情况
      logLevel: 'debug',
    });

    // 仅在代理出错时传递错误，正常情况代理会自行处理响应
    proxy(req, res, (err) => {
      if (err) {
        return next(err);
      }
    });
  }
}

3. 验证目标服务可用性 #

先确认localhost:8001服务正常运行：

• 直接访问http://localhost:8001，检查服务是否能返回正常响应
• 排查目标服务是否存在端口占用、路由配置错误等问题

4. 处理跨域限制（若存在） #

如果目标服务有CORS限制，可在NestJS中开启CORS支持：

// main.ts
async function bootstrap () {
  const app = await NestFactory.create(AppModule);
  app.enableCors();
  await app.listen(3000);
  console.log('Application is running on: http://localhost:3000');
}

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