Back to Blog
Engineering 2 min read

How to Fix CORS Errors in Supabase Edge Functions (2026)

Getting a CORS error calling a Supabase Edge Function from the browser? Here's why it happens and the exact code to handle the preflight request and fix it.

By the Amex Technology Team

How to Fix CORS Errors in Supabase Edge Functions (2026) — guide by Amex Technology

The Problem

If your browser console shows Access to fetch ... has been blocked by CORS policy when calling a Supabase Edge Function, the function isn't returning the right CORS headers. The function often runs fine — the browser just refuses to let your page read the response.

Why It Happens

Before the real request, the browser sends a preflight OPTIONS request to any cross-origin function. If the function doesn't answer OPTIONS with the correct Access-Control-Allow-* headers, the browser blocks the actual call. Supabase Edge Functions do not add these headers for you.

The Fix

1. Define CORS headers and handle the OPTIONS request

const corsHeaders = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
  'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
};
Deno.serve(async (req) => {
  // Answer the preflight request first
  if (req.method === 'OPTIONS') {
    return new Response('ok', { headers: corsHeaders });
  }
  const data = { message: 'Hello from the edge' };
  return new Response(JSON.stringify(data), {
    headers: { ...corsHeaders, 'Content-Type': 'application/json' },
  });
});

2. Add the headers to every response — including errors

A common mistake is returning error responses without CORS headers. Spread corsHeaders into every Response you return, success or failure, or errors will surface as confusing CORS failures.

3. Lock the origin down in production

'*' is fine while testing, but in production set Access-Control-Allow-Origin to your real domain, for example https://amextechnology.com, so only your site can call the function.

Frequently Asked Questions

Does my function still run if I see a CORS error?

Usually yes. The function executes and may even succeed — the browser simply blocks your page from reading the response because the headers are missing.

Why does it work in Postman or curl but not the browser?

CORS is a browser-only security mechanism. Non-browser clients like curl and Postman ignore it entirely.

Do I need CORS headers for same-origin calls?

No. CORS only applies to cross-origin requests. If your frontend and function share an origin, you don't need it.

Can I configure CORS in the Supabase dashboard instead of code?

No. For Edge Functions you handle CORS in the function code itself, as shown above.

Want Your Supabase Backend Done Right?

Edge Functions, auth, and APIs have sharp edges like this. Amex Technology builds production-grade Supabase backends that handle CORS, security, and errors properly from day one. See our services or get in touch.

Related Services

Supabase Edge Functions CORS Troubleshooting

Need help building this?

Our team specializes in exactly this kind of work. Get a free quote and honest assessment within 24 hours.

Start a Project
Typically responds within 4 hours

Ready to build your next digital product?

Tell us what you're building. We'll respond with a clear plan, honest scope estimate, and a timeline — no obligations.

No commitment required
Free consultation
4-hour response
No-commitmentfirst call
4hresponse time
5+ yearsexperience