CORS issue with serverless function.

[wicked yoke]

Hi @strange prawn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

It seems you're facing CORS issues in production with your Next.js app. Based on the information extracts, you can set CORS headers on a Response using the standard Web API methods in your API route. Here's an example:

export async function GET(request: Request) {
  return new Response('Hello, Next.js!', {
    status: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    },
  });
}

Source: Next.js Documentation - Route Handlers - Examples - CORS (https://nextjs.org/docs/app/building-your-application/routing/router-handlers)

However, if you're using Edge API Routes, you should know that they do not specify CORS headers by default, meaning they are same-origin only. You can customize this behavior by wrapping the request handler with the CORS request helpers. You can find an example in the CORS request helpers repository (https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors).

Source: Next.js Documentation - Edge API Routes - Caveats (https://nextjs.org/docs/api-routes/edge-api-routes)

Please make sure to review the extracts and adjust your implementation accordingly.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@strange prawn kapa.ai is still learning and improving, please let us how it did by reacting below