How do you handle CORS in Next.js Route Handlers?

Question

Accepted Answer

CORS errors occur when a browser blocks a request made from one origin (e.g. http://localhost:3000) to a different origin (e.g. https://api.example.com). In Next.js Route Handlers, you control CORS entirely through response headers — there is no built-in CORS middleware like Express has. Access-Control-Allow-Origin — which origins can access the resource (* for all, or specific origin) Access-Control-Allow-Methods — which HTTP methods are allowed (GET, POST, PUT, DELETE, OPTIONS) Access-Control-Allow-Headers — which request headers are allowed (Content-Type, Authorization) Access-Control-Allow-Credentials — whether cookies/auth headers can be sent (true/false) Access-Control-Max-Age — how long preflight response can be cached in seconds Access-Control-Expose-Headers — which headers are exposed to the browser // app/api/data/route.js
export async function GET(request) {
  const data = { message: 'Hello from API' }

return new Response(JSON.stringify(data), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
      // ✅ Allow all origins (public API)
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization'
    }
  })
} // app/api/data/route.js
// Browsers send an OPTIONS preflight request before POST/PUT/DELETE
// You MUST handle it or CORS will fail for non-GET requests

export async function OPTIONS(request) {
  return new Response(null, {
    status: 204, // No Content
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
      'Access-Control-Max-Age': '86400' // cache preflight for 24 hours
    }
  })
}

export async function POST(request) {
  const body = await request.json()

return new Response(JSON.stringify({ received: body }), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*'
    }
  })
} // lib/cors.js
// ✅ Centralized CORS config — reuse across all route handlers

const ALLOWED_ORIGINS = [
  'https://myapp.com',
  'https://admin.myapp.com',
  'http://localhost:3000'
]

const CORS_HEADERS = {
  'Access-Control-Allow-Methods':  'GET, POST, PUT, DELETE, OPTIONS',
  'Access-Control-Allow-Headers':  'Content-Type, Authorization, X-Requested-With',
  'Access-Control-Max-Age':        '86400'
}

export function getCorsHeaders(request) {
  const origin = request.headers.get('origin') ?? ''

// ✅ Only allow specific origins — not wildcard
  const allowedOrigin = ALLOWED_ORIGINS.includes(origin)
    ? origin
    : ALLOWED_ORIGINS[0]

return {
    ...CORS_HEADERS,
    'Access-Control-Allow-Origin': allowedOrigin
  }
}

export function handlePreflight(request) {
  return new Response(null, {
    status: 204,
    headers: getCorsHeaders(request)
  })
} // app/api/products/route.js
import { getCorsHeaders, handlePreflight } from '@/lib/cors'

// ✅ Handle preflight
export async function OPTIONS(request) {
  return handlePreflight(request)
}

export async function GET(request) {
  const products = await fetchProducts()

return new Response(JSON.stringify(products), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
      ...getCorsHeaders(request) // ✅ spread CORS headers
    }
  })
}

export async function POST(request) {
  const body = await request.json()
  const product = await createProduct(body)

return new Response(JSON.stringify(product), {
    status: 201,
    headers: {
      'Content-Type': 'application/json',
      ...getCorsHeaders(request) // ✅ same helper
    }
  })
} // middleware.js — runs before every matched request
import { NextResponse } from 'next/server'

const ALLOWED_ORIGINS = [
  'https://myapp.com',
  'https://admin.myapp.com',
  'http://localhost:3000'
]

export function middleware(request) {
  const origin   = request.headers.get('origin') ?? ''
  const isAllowed = ALLOWED_ORIGINS.includes(origin)

// ✅ Handle preflight globally
  if (request.method === 'OPTIONS') {
    return new NextResponse(null, {
      status: 204,
      headers: {
        'Access-Control-Allow-Origin':  isAllowed ? origin : '',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
        'Access-Control-Max-Age':       '86400'
      }
    })
  }

// ✅ Add CORS headers to all API responses
  const response = NextResponse.next()

if (isAllowed) {
    response.headers.set('Access-Control-Allow-Origin',  origin)
    response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization')
  }

return response
}

// ✅ Only run middleware on API routes
export const config = {
  matcher: '/api/:path*'
} // app/api/auth/route.js
/

How do you handle CORS in Next.js Route Handlers?

CORS (Cross-Origin Resource Sharing) in Next.js Route Handlers is handled by manually setting HTTP headers on responses. Unlike Express which has the 'cors' middleware, Next.js Route Handlers require you to set headers explicitly — either per route or globally via a helper function or middleware.

How do you handle CORS in Next.js Route Handlers?

CORS (Cross-Origin Resource Sharing) in Next.js Route Handlers is handled by manually setting HTTP headers on responses. Unlike Express which has the 'cors' middleware, Next.js Route Handlers require you to set headers explicitly — either per route or globally via a helper function or middleware.

Scenario Questions

Follow-up Questions