如何在NestJS ServeStaticModule前运行中间件处理前端路由？

在NestJS中，我希望在ServeStaticModule提供React应用服务前运行中间件，但目前无论是Nest中间件还是全局中间件，仅能在/和/api*路由生效，无法作用于/posts、/orders/123这类前端路由。

现有代码示例 #

main.ts #

app.use([AuthRedirectMiddleware, VerifyMiddleware]);

// 或者一个简单的日志中间件
app.use(function (req, res, next) {
   console.log("LOG: ", req.originalUrl);
   next();
});

// 上述中间件仅对/和/api*生效
// 对/posts、/orders/123（均为前端路由）不生效

// 设置API路由全局前缀
app.setGlobalPrefix("api");

app.module.ts #

@Module({
  imports: [
    ConfigModule.forRoot(),
    ServeStaticModule.forRoot({
      rootPath: clientPath,
      exclude: ["/api*"],
    }),
    SharedModule,
    // ...其他模块
  ],
  controllers: [],
  providers: [],
})
export class AppModule {}

问题原因 #

默认情况下，ServeStaticModule注册的静态资源服务中间件会早于全局中间件执行。当请求是前端路由（非/api*路径）时，ServeStatic会直接返回React静态资源，不会继续向后传递请求，导致自定义中间件无法被触发。

解决方案 #

方案一：手动注册静态资源中间件（推荐） #

放弃使用ServeStaticModule，在main.ts中先注册自定义全局中间件，再手动引入serve-static中间件，确保执行顺序正确：

// main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as serveStatic from 'serve-static';
import { join } from 'path';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  
  // 1. 先注册所有自定义全局中间件
  app.use([AuthRedirectMiddleware, VerifyMiddleware]);
  app.use((req, res, next) => {
    console.log("LOG: ", req.originalUrl);
    next();
  });

  // 2. 设置API路由前缀
  app.setGlobalPrefix('api');

  // 3. 最后注册静态资源服务中间件，排除/api*路径
  const clientPath = join(__dirname, '..', 'path-to-react-build'); // 替换为你的React构建目录路径
  app.use(serveStatic(clientPath, {
    exclude: ['/api*'],
  }));

  await app.listen(process.env.PORT || 3000);
}
bootstrap();

同时，在app.module.ts中移除ServeStaticModule的导入。

方案二：通过ServeStaticModule的自定义配置注入中间件 #

如果坚持使用ServeStaticModule，可以利用其serveStaticOptions添加前置逻辑（注意：部分版本可能需要调整写法）：

// app.module.ts
@Module({
  imports: [
    ConfigModule.forRoot(),
    ServeStaticModule.forRoot({
      rootPath: clientPath,
      exclude: ["/api*"],
      serveStaticOptions: {
        // 在返回静态资源前执行自定义逻辑
        middleware: (req, res, next) => {
          console.log("LOG: ", req.originalUrl);
          next();
        },
      },
    }),
    SharedModule,
    // ...其他模块
  ],
})
export class AppModule {}

这种方法的局限性是无法直接复用已有的Nest中间件类，更适合简单的逻辑处理。

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