reactjs - POSTリクエストを行うときにのみ発生するNestJSとVercelのCORS問題

GETリクエストは問題なく動作しますが、私はSWRを使ってPOSTリクエストを行い、Firebaseにものを送信したり、状態をこのように変化させたりしていますが、POSTリクエストはできません。

const item = await fetcher.POST(`/jobs?user_id=${user.id}`, _job)

        mutate(item)

fetcher はこのように設定されており、HOST が API へのルートになっています

fetcher.POST = (
  url,
  data,
  headers = {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json'
  }
) => {
  return fetcher(HOST + url, {
    method: 'POST',
    headers,
    body: JSON.stringify(data)
  })
}

これはコンソールでの私のエラーです ---- オリジン 'https://workshop-4i8ymvm1s.vercel.app' から 'https://example-api.vercel.app/v1/jobs?user_id=8JKY8PRM5APwIz1' へのフェッチへのアクセスは CORS ポリシーによってブロックされました: プリフライトリクエストへのレスポンスがアクセス制御チェックを通過しませんでした: 要求されたリソースには 'Access-Control-Allow-Origin' ヘッダーが存在しません。もし不透明なレスポンスで問題ない場合、リクエストのモードを 'no-cors' に設定して CORS を無効にしてリソースをフェッチしてください。

私の NestJS サーバーレス関数では、index.ts と main.ts ファイルでこのように CORS を設定しています。（これは問題ですか？） ---

 const app = await NestFactory.create(AppModule, {
    snapshot: true,
    logger: new Logg(),
    cors: true
  });

&&

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

ドキュメントを確認しましたが、代替案が見つからないようです。

私はPostmanで試してみましたが、ブラウザを使用しているわけではありませんでした。しかし、機能するかどうかをテストするために試したところ、機能しました。

回答 #1

あなたの NestJS API に vercel.json ファイルはありますか？

VercelはあなたのCORS設定を上書きするため、以下のコードのようにNestプロジェクトのルートにファイルを作成してください。パスはあなたのコード構造に合わせて変更し、POSTリクエストに必要なため、OPTIONSメソッドがあることを必ず確認してください。

{
  "version": 2,
  "builds": [
    {
      "src": "src/main.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "headers": {
        "Access-Control-Allow-Origin": "*"
      },
      "dest": "src/main.ts",
      "methods": [
        "GET",
        "POST",
        "PUT",
        "DELETE",
        "PATCH",
        "OPTIONS"
      ]
    }
  ]
}

回答 #2

答えは、vercel.json のメソッドのリストに OPTIONS を追加するだけです

参照: Vercel にデプロイ後の Nest.js アプリでの CORS の問題