Enable CORS | Next.js Supabase SaaS Kit

Learn how to enable CORS in your Next.js Supabase Saa S Kit 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:

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,
    });
  }
}

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; }

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', }, }); } }

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, }); } }