Lambda関数にのせたNestJSで作成したAPIでGETはできるがPOSTでCORSエラーが出るのを解決したい

Question

実現したいこと

• POSTメソッドも動くようにしたい

※POSTメソッドが成功しないため、DELETE,PUTも試せていません。

前提

NestJSでAPIを作成しました。
作成したAPIをLambdaに乗せ、API GateWayでエンドポイントを作成しました。
フロントエンドはNestJSで作成し、Vercelにデプロイしました。

発生している問題・エラーメッセージ

POSTメソッドがCORSではじかれます。

Access to fetch at 'https://xxxxxx.amazonaws.com/api/v1/login' from origin 'https://xxxxxxx.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

該当のソースコード

// CORSの設定箇所
 app.use((req: any, res: any, next: any) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type,  Authorization');
    res.header('Access-Control-Allow-Methods', '*');
    next();
  });

export const connectApi = (method: string, url: string, body: any) => {
  return new Promise<ApiResponse>((resolve, reject) => {
    const URL = process.env.NEXT_PUBLIC_BASE_URL + url
    let headers
    if (getLocalStorage('token')) {
      headers = {
        'Content-type': 'application/json; charset=UTF-8',
        Authorization: `Bearer ${getLocalStorage('token')!}`,
      }
    } else {
      headers = {
        'Content-type': 'application/json; charset=UTF-8',
      }
    }
    // POST送信
    fetch(URL, {
      method: method,
      headers: headers,
      body: JSON.stringify(body),
    })
      .then((response) => {
        return response.json()
      })
      .then((data) => {
        resolve(data)
      })
      .catch((e) => {
        resolve(e)
      })
  })
}

API GateWayのCORS設定

Access-Control-Allow-Origin	https://********.vercel.app
Access-Control-Allow-Headers	content-type,authorization
Access-Control-Allow-Methods	*
Access-Control-Max-Age	-1秒
Access-Control-Allow-Credentials	true

試したこと

下記サイトを参考にAPI GateWayのCORS設定を色々と試してみました。
https://qiita.com/daikiojm/items/4c2143a213332abf11704
https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/how-to-cors.html
https://note.com/shift_tech/n/ne5c3628ec6d1

curlコマンドで試してみました。

curl -X POST "https://****.amazonaws.com/api/v1/login" -H "Content-Type:application/json" -d "{\"username\":\"****\",\"password\":\"****\"}"

上記実行すると期待しているレスポンスが取得できました。
コマンドで取得できるのにブラウザから叩けない理由がわかりません。
※コメントに追記しました。

補足情報（FW/ツールのバージョンなど）

"@nestjs/common": "^9.0.0",

Comments

[nove-b]

> 上記実行すると期待しているレスポンスが取得できました。
コマンドで取得できるのにブラウザから叩けない理由がわかりません。

CORSはJsvascriptの仕様なんですね、勉強不足でした、

Answer 1

ここに記載する前に書いていたコード

const app = await NestFactory.create(AppModule);
await app.init();
app.useGlobalPipes(new ValidationPipe());
app.useGlobalFilters(new HttpExceptionFilter());
 // TODO:CROSを一時的に有効にする
app.enableCors();
const expressApp = app.getHttpAdapter().getInstance();
return serverlessExpress({ app: expressApp });4

と書いていたのですが、この順番を変えることで解決できました。

  app.enableCors()
  app.useGlobalPipes(new ValidationPipe());
  app.useGlobalFilters(new HttpExceptionFilter());
  await app.init();

理由はわかりませんが、解決しましたので、取り急ぎ。