プレフライトリクエストで404エラー（CORS preflight channel did not succeed）が発生

Question

nestJsでAPIを作成しています。

フロントからAPIを呼び出した時に、プレフライトリクエストで404エラーが発生してしまいます。
エラー原因が「CORS preflight channel did not succeed」とのことですが、
下記のようにサーバーサイドでCORSの設定をしているため、なぜ発生しているのかわかりません。
原因がわかる方、ご教授頂きたいです。

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { Request, Response, NextFunction } from 'express';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.use((req: Request, res: Response, next: NextFunction) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Origin, token, X-Requested-With, Content-Type, Accept');
    res.header('Access-Control-Allow-Method', 'GET, PUT, OPTIONS,POST,DELETE');
    res.header('Access-Control-Max-Age', '20');
    next();
  });
  await app.listen(8000);

}
bootstrap();

Comments

[退会済みユーザー]

> 下記のようにサーバーサイドでCORSの設定をしている

そのエラーは "CORS の要求がプリフライトを必要としていますが、プリフライトが実行できませんでした" ということだそうです。

Reason: CORS preflight channel did not succeed
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed

プリフライトを処置できるようになっているのでしょうか？ node.js は分かりませんが、コードを見る限りそうはなってないように見えますけど。

[退会済みユーザー]

Fiddler などのキャプチャツールで要求・応答ヘッダを見てはいかがですか？　以下は Fiddler の画像ですが、プリフライトの要求・応答ヘッダは以下のようになると思います。

http://surferonwww.info/BlogEngine/image.axd?picture=2016%2f12%2fpreflight.jpg

ブラウザは応答ヘッダを見て実際のリクエストを送信しても安全かを確認し、サーバーに要求を出して（上の画像で #3 がそれ）応答を取得し、コンテンツに含まれる情報を処置します。

[lawsoncoffee]

ありがとうございます。
プリフライトの要求・応答ヘッダはいただいたスクショのようになっていたのですが、
404になっていました。

Answer 1

このやり方が正しいのかわかりませんが、一旦サーバーサイドに以下を追記したら行けました。。。

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