NestJS 開発での CORS 問題と解決方法

NestJS を使用した API 開発中に、ブラウザからのリクエストで CORS (Cross-Origin Resource Sharing) エラーが発生することがあります。この問題の原因と解決方法をまとめました。

---

【原因】

CORS 問題は、クライアント (例: http://localhost:3000)から、別のオリジンの API (例: http://localhost:8080)に HTTP リクエストを送信した際に発生します。

これはブラウザのセキュリティメカニズムにより、インジェクションできる資源を制限するために実装されています。

NestJS サーバーでは、CORS を有効にしていない場合、リクエストは拒否されます。

---

【解決方法】

1. NestJS での CORS 設定

NestJS で CORS を有効にするには、enableCors メソッドを使用します。

以下のようにサーバー起動時に設定してください。

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

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

  // CORS を有効化
  app.enableCors({
    origin: 'http://localhost:3000', // 許可するオリジン
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE', // 許可する HTTP メソッド
    credentials: true, // Cookie を送信する場合に設定
  });

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

• 特定のオリジンのみを許可
  セキュリティを高めるために、必要なオリジンのみを許可します。

• すべてのオリジンを許可する場合
  開発時には、一時的にすべてのオリジンを許可することが可能です。

  app.enableCors({
    origin: '*',
  });
  

2. Middleware を使用した CORS 設定

CORS 設定を細かく制御したい場合は、@nestjs/platform-express を使用してミドルウェアとして実装できます。

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

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

  app.use(
    cors({
      origin: 'http://localhost:3000', // 許可するオリジン
      methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
      credentials: true,
    }),
  );

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

3. Docker を使用している場合の考慮

Docker 環境で NestJS を起動している場合、クライアントがサーバーと同じネットワーク内からアクセスできることを確認します。

• docker-compose.yml のネットワーク設定を確認し、app-network 内の通信が有効な状態であることを調べてください。

4. Axios のリクエスト設定

クライアント側の Axios リクエストに、withCredentials オプションを追加することで Cookie を送信できます。

axios
  .get("http://localhost:8080/test/test", {
    withCredentials: true, // Cookie の送信を有効にする
  })
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

---

【デバッグ步衵】

1. ブラウザのデベロッパーツールでネットワークタブを確認

   • プリフライトリクエスト (OPTIONS)のレスポンスヘッダーに Access-Control-Allow-Origin が含まれているか確認する。

2. サーバーのログ確認

   • リクエストが到達しているか、エラーが発生している場合はその内容を確認する。

3. Postman や curl を使用した確認

   • Postman や curl で直接リクエストを送信し、サーバーが正常に応答するか確認します。

   curl -X GET http://localhost:8080/test/test
   

---

NestJS の CORS 問題は、通常、サーバー側での設定の誤りにより発生します。上記の手順を試し、問題を解決してください。