Accessing response headers in API routes of App Router?

[art-alexeyenko]

Summary

API route handlers in Pages Router had access to both Request and Response objects, so you could read response headers like Set-Cookie, Access-Control-Allow-Origin and others.
App Router's GET, POST and other handler functions only accept a Request object.
Now, NextRequest type allows to access Set-Cookie. But what about other headers, like CORS set by next.config rules?

Additional information

No response

Example

No response

[Andrew1326]

In App Router, you control response headers directly by constructing and returning a NextResponse (or Response) object from your route handler. Unlike Pages Router where res was a mutable object you'd modify, in App Router you build the response with its headers:

Setting and reading response headers

// app/api/example/route.ts
import { NextRequest, NextResponse } from 'next/server'

export async function GET(request: NextRequest) {
  const response = NextResponse.json({ message: 'Hello' })
  
  // Set any response headers you want
  response.headers.set('X-Custom-Header', 'my-value')
  response.headers.set('Access-Control-Allow-Origin', '*')
  
  // Read headers you've set (or that NextResponse added)
  console.log(response.headers.get('content-type')) // application/json
  
  return response
}

CORS headers specifically

For CORS headers configured via next.config.js headers() — those are applied after your route handler returns, at the server/middleware level. Your handler code won't "see" them because they're added to the final HTTP response by the framework.

If you need to inspect or conditionally set CORS headers inside the handler itself, set them explicitly instead of relying on next.config.js:

// app/api/data/route.ts
export async function GET(request: NextRequest) {
  const origin = request.headers.get('origin') || ''
  
  const response = NextResponse.json({ data: 'value' })
  
  // Set CORS headers explicitly
  response.headers.set('Access-Control-Allow-Origin', origin)
  response.headers.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
  response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization')
  
  return response
}

// Handle preflight
export async function OPTIONS(request: NextRequest) {
  const origin = request.headers.get('origin') || ''
  
  return new NextResponse(null, {
    status: 204,
    headers: {
      'Access-Control-Allow-Origin': origin,
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
      'Access-Control-Max-Age': '86400',
    },
  })
}

Reading cookies from the response

For Set-Cookie specifically, you can use the built-in cookies API:

export async function POST(request: NextRequest) {
  const response = NextResponse.json({ success: true })
  
  // Set cookies
  response.cookies.set('session', 'abc123', {
    httpOnly: true,
    secure: true,
    sameSite: 'lax',
    maxAge: 60 * 60 * 24,
  })
  
  // Read what you've set
  const sessionCookie = response.cookies.get('session')
  console.log(sessionCookie) // { name: 'session', value: 'abc123', ... }
  
  return response
}

TL;DR: In App Router, you don't read response headers — you create them. The response object is yours to construct. For CORS or other headers added by next.config.js, those are applied by the framework after your handler, so if you need access to them inside the handler, set them explicitly in your code instead.

[sefin23]

In Next.js App Router, you can access and set response headers in Route Handlers like this:

Reading request headers:

ts
import { headers } from 'next/headers';
export async function GET() {
const headersList = await headers();
const authToken = headersList.get('authorization');
return Response.json({ token: authToken });
}
Setting response headers:

ts
export async function GET() {
return new Response(JSON.stringify({ data: 'hello' }), {
status: 200,
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'no-store',
'X-Custom-Header': 'my-value',
},
});
}
Using NextResponse for convenience:

ts
import { NextResponse } from 'next/server';
export async function GET() {
const response = NextResponse.json({ data: 'hello' });
response.headers.set('X-Custom-Header', 'my-value');
return response;
}
Note: The headers() function from next/headers is read-only — you can only read incoming request headers with it, not set outgoing ones. To set response headers, use the Response or NextResponse approach above. Hope this helps!