NestJS で Controller 単位で CORS を設定する

UseCase

CORS の設定を Controller 単位で設定する

前提知識

同一オリジンポリシー(same-origin policy):ブラウザはセキュリティ上の観点から異なるオリジン間 HTTP リクエストを制限しています。異なるオリジン間でリクエストを行う際は CORS を使用して許可を行う必要があります。

CORS: オリジン間リソース共有(Cross-Origin Resource Sharing)は、HTTP ヘッダーを使用して、異なるオリジン間でのリソース共有を許可する仕組みです。

次に、CORS で使用される主要なヘッダーを紹介します。

• Access-Control-Allow-Origin
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers
• プリフライト

実装

import { Injectable, NestMiddleware } from "@nestjs/common";
import { Request, Response, NextFunction } from "express";

@Injectable()
export class CatsCorsMiddleware implements NestMiddleware {
  use(req: Request, res: Response, next: NextFunction) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header(
      "Access-Control-Allow-Methods",
      "GET, POST, OPTIONS, PUT, PATCH, DELETE",
    );
    res.header(
      "Access-Control-Allow-Headers",
      "Origin, X-Requested-With, Content-Type, Accept, Authorization",
    );

    if (req.method === "OPTIONS") {
      res.sendStatus(200);
    } else {
      next();
    }
  }
}

import { MiddlewareConsumer, Module, NestModule } from "@nestjs/common";
import { CatsCorsMiddleware } from "./cats/cats.cors.middleware";
import { CatsController } from "./cats/cats.controller";

@Module({
  controllers: [CatsController],
})
export class AppModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer
      .apply(CatsCorsMiddleware)
      // ※CatsController 渡しても機能しないので注意
      .forRoutes("cats");
  }
}

その他

• 基本的にはapp.enableCors()を使用することで、全てのリクエストに対して CORS を設定することができます。
• NestJS の GraphQLModule の Cors 設定は、app.enableCors()とは別の設定方法が必要です。

参考

• Middleware | NestJS - A progressive Node.js framework
• オリジン間リソース共有 (CORS) - HTTP | MDN
• HTTP ヘッダー - HTTP | MDN