# Enable CORS | Next.js Supabase SaaS Kit

> Learn how to enable CORS in your Next.js Supabase Saa S Kit application

*Canonical: https://makerkit.dev/docs/next-supabase/development/cors*

---

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:

```tsx
function 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.

```tsx
import { 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 Makerkit 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.

```tsx
import withCors from '~/core/middleware/with-cors';

export async function GET(request: NextRequest) {
  const headers = withCors();

  if (request.method === `OPTIONS`) {
    return new Response(null, {
      headers,
    });
  }
}
```