NestJS アプリケーションでの CORS (Cross-Origin Resource Sharing) の問題の処理とデバッグ

NestJS アプリでの CORS (Cross-Origin Resource Sharing) の問題の処理とデバッグは、少し難しい場合があります。 CORS は本質的に、特にフロントエンドとバックエンドが異なるドメイン上にある場合に、相互に適切に通信できるようにするセキュリティ メカニズムです。 NestJS で CORS に取り組み、一般的な問題のトラブルシューティングを行う方法の概要を以下に示します。

1. NestJS で CORS を有効にする

NestJS アプリケーションで CORS を有効にするには、NestJS アプリケーションがインスタンス化される main.ts ファイル内で CORS を構成する必要があります。 CORS を有効にするには、NestJS NestFactory によって提供されるenableCors メソッドを使用します。

構成例:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // Enabling CORS with default settings
  app.enableCors();

  // Enabling CORS with specific settings
  app.enableCors({
    origin: 'http://your-frontend-domain.com', // Allow requests from this domain
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE', // Allow these methods
    allowedHeaders: 'Content-Type, Authorization', // Allow these headers
    credentials: true, // Allow credentials (cookies, HTTP authentication)
  });

  await app.listen(3000);
}
bootstrap();

2. CORS 問題のデバッグ

CORS の問題が発生した場合は、次の手順に従ってデバッグして解決します。

CORS 構成を確認します

• 許可されたオリジンの確認: app.enableCors 構成のオリジン プロパティにフロントエンド アプリケーションのドメインが含まれていることを確認します。
• メソッドとヘッダー: メソッドと allowedHeaders プロパティがフロントエンド アプリケーションのニーズに従って正しく設定されていることを確認します。

ネットワークリクエストを検査する

• ブラウザ開発ツール: ブラウザの開発者ツール (通常は [ネットワーク] タブにあります) を使用して、リクエスト ヘッダーとレスポンス ヘッダーを検査します。応答ヘッダーで Access-Control-Allow-Origin、Access-Control-Allow-Methods、および Access-Control-Allow-Headers を探します。
• プリフライト リクエスト: 非標準の HTTP メソッドまたはカスタム ヘッダーを使用している場合は、サーバーがプリフライト リクエスト (OPTIONS リクエスト) を正しく処理していることを確認してください。

サーバーログを確認する

• コンソール ログ: コンソール ログをサーバー側のコードに追加して、リクエストがサーバーに到達しているかどうか、また CORS ヘッダーが正しく適用されているかどうかを確認します。
• エラー メッセージ: CORS 構成に関連するエラーがないかサーバー ログを確認してください。

プロキシ構成を確認します

• ローカル開発: ローカル開発にプロキシ (React アプリの http-proxy-middleware など) を使用している場合は、プロキシが正しく構成されており、期待どおりにリクエストを転送していることを確認してください。
• プロキシ ヘッダー: プロキシが必要な CORS ヘッダーを変更または削除していないことを確認してください。

cURL でテストする

• cURL コマンド: cURL を使用して API エンドポイントを直接テストし、CORS ヘッダーが正しく返されるかどうかを観察します。これは、問題がフロントエンド構成にあるのかバックエンド構成にあるのかを特定するのに役立ちます。

  curl -i -X OPTIONS http://localhost:3000/api/v1/resource -H "Origin: http://your-frontend-domain.com"

CORS の一般的な問題

• オリジンの不一致: リクエスト内のオリジンが CORS 構成で指定されたオリジンと一致することを確認してください。
• 間違ったヘッダー: 必要なヘッダーがすべて allowedHeaders 構成に含まれていることを確認してください。
• 認証情報がありません: 認証情報が関係する場合 (Cookie など)、CORS 構成で credentials: true が設定されていることを確認してください。

最後に、NestJS アプリケーションで CORS の問題を処理するということは、フロントエンドとバックエンドが適切な権限で通信していることを確認することになります。適切な CORS 構成をセットアップし、リクエストを確認し、ブラウザーとバックエンド ツールを使用してデバッグすることで、発生するほとんどの問題を解決できます。スムーズな対話の鍵となるのは、両端の明確で正確な構成であることを忘れないでください。すべてがシームレスに機能するまで、セットアップを実験し、調整し続けます。幸運を祈って、ネストを楽しんでください!!!

以上がNestJS アプリケーションでの CORS (Cross-Origin Resource Sharing) の問題の処理とデバッグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。