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