Breadcrumbs
Enable CORS
Learn how to enable CORS in your Next.js application
Enabling CORS is required if you want to allow serving HTTP request to external clients.
For example, if you want to expose an API to some consumers: JS libraries, headless clients, and so on.
The code to enable CORS in Next.js is very simple. In fact, you can enable it using the following code:
tsfunction withCors() {
const headers = new Headers();
headers.append('Access-Control-Allow-Origin', '*');
headers.append(
'Access-Control-Allow-Headers',
'Origin, X-Requested-With, Content-Type, Accept, referer-path'
);
return headers;
}Additionally, you need to handle OPTIONS requests appropriately.
tsimport { NextRequest } from "next/server";
export async function GET(request: NextRequest) {
if (request.method === `OPTIONS`) {
return new Response(null, {
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, HEAD, POST, PUT, DELETE',
},
});
}
}In your NextKit codebase, this function is already available in the ~/core/middleware/with-cors.ts file.
To enable CORS, you can simply call it in your handler. If it fails, it will throw an exception with the appropriate HTTP status code.
tsimport withCors from '~/core/middleware/with-cors';
export async function GET(request: NextRequest) {
const headers = withCors();
if (request.method === `OPTIONS`) {
return new Response(null, {
headers,
});
}
}