• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
  • Global Configuration
    • Environment Variables
  • Server Actions
    • Sending CSRF Token to Actions
    • Server Actions Error Handling
  • Architecture and Folder Structure
    • Structure your Application
    • Data Model
    • Commands
    • Code Style
    • Sending Emails
    • RLS Policies
    • Validating API payload with Zod
    • Logging
    • Enable CORS
    • Encrypting Secrets
This documentation is for a legacy version of Next.js and Supabase (Lite). For the latest version, please visit the Next.js and Supabase V2 documentation

Enable CORS in Next.js Supabase SaaS Kit

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:

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.

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.

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