reactjs - CORS-probleem NestJS en Vercel alleen bij POST-verzoeken

GET-verzoeken werken prima, maar ik gebruik SWR om POST-verzoeken te doen om dingen naar Firebase te sturen en dingen in de staat te muteren zoals dit, maar ik kan geen POST-verzoeken doen

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

        mutate(item)

fetcher is zo ingesteld dat HOST de route naar de api is

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

Dit is mijn fout in de console ---- Toegang tot fetch op 'https://example-api.vercel.app/v1/jobs?user_id=8JKY8PRM5APwIz1' vanaf oorsprong 'https://workshop-4i8ymvm1s.vercel.app' is geblokkeerd door het CORS-beleid: Respons op preflight-aanvraag slaagt niet voor toegangcontrole: Er is geen 'Access-Control-Allow-Origin'-header aanwezig op de aangevraagde bron. Als een ondoorzichtige respons aan uw behoeften voldoet, stel dan de modus van het verzoek in op 'no-cors' om de bron op te halen met CORS uitgeschakeld.

Op mijn NestJS serverless functie heb ik CORS zo ingesteld in mijn index.ts- en main.ts-bestand. (Is dit een probleem?) ---

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

&&

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

Ik heb de documenten doorgenomen, maar ik kan geen alternatieven zien.

Ik heb het geprobeerd op Postman en het werkt, maar dat gebruikt geen browser, het was om te testen of het werkt en dat doet het.

Antwoord #1

Heb je een vercel.json bestand in je NestJS API?

Vercel zal je cors-configuratie overschrijven, dus maak een bestand aan in de hoofdmap van je nest-project zoals de onderstaande code. Pas de paden aan zodat ze overeenkomen met je code-structuur en zorg ervoor dat je de OPTIONS-methode hebt, omdat dat nodig is voor POST-verzoeken.

{
  "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"
      ]
    }
  ]
}

Antwoord #2

Het antwoord is gewoon OPTIONS toevoegen aan de lijst van methoden in de vercel.json

Zie: Probleem met CORS in Nest.js-app na implementatie op Vercel