[Nestjs] クロスドメインの問題を解決する

フロントエンドとバックエンドの開発では、解決する必要があるクロスドメインの問題に遭遇することがよくあります。次に、Nestjs でクロスドメインの問題を解決する方法を簡単に紹介します。

まず、@nestjs/commonパッケージからモジュールをインストールしますcors。

npm install --save @nestjs/common

CORS ミドルウェアをグローバルに使用する: NestJS アプリケーションのルートモジュール (通常はapp.module.ts) で、app.use()CORS ミドルウェアをグローバルに有効にするメソッドを使用します。

import { MiddlewareConsumer, Module, NestModule } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { CorsMiddleware } from '@nestjs/common';

@Module({
  imports: [],  // 导入其他模块
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer.apply(CorsMiddleware).forRoutes('*');
  }
}

上記のコードのメソッドはミドルウェアconfigure()を使用し、それをすべてのルートに適用します。CorsMiddleware特定のルートを指定することで、クロスオリジンリクエストを制限することもできます。

apply()カスタム CORS 設定: CORS 設定をカスタマイズする必要がある場合は、構成オブジェクトをメソッドに渡し、その中で必要なオプションを定義できます。

import { CorsOptions } from '@nestjs/common/interfaces/external/cors-options.interface';

const corsOptions: CorsOptions = {
  origin: 'http://example.com',  // 设置允许请求的来源
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',  // 设置允许的 HTTP 方法
  allowedHeaders: 'Content-Type,Authorization',  // 设置允许的请求头
};

// 在 configure() 方法中应用自定义的 CORS 设置
export class AppModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer.apply(CorsMiddleware(corsOptions)).forRoutes('*');
  }
}

上記のコードでは、とを設定してorigin、クロスドメインリクエストの送信元、許可するHTTPメソッド、リクエストヘッダーを定義することで、NestJSアプリケーションにクロスドメインの問題を解決する機能を実装することができます。セキュリティとデータ保護を確保するために、本番環境で CORS が適切に構成されていることを確認します。methodsallowedHeaders

[Nestjs] クロスドメインの問題を解決する

おすすめ