Persistent CORS Preflight Error on Edge Functions (OPTIONS request fails)

[RamziHammami25]

Hello Supabase Team and community,

I am experiencing a persistent CORS issue when trying to invoke any Edge Function from my client-side React application.

Context:

• Project Ref: ghnwafrebtcnuqkbnans
• Client: React (Vite) application using supabase-js.
• Origin: http://localhost:5173

Problem:
Whenever I try to call an Edge Function (e.g., create-user or delete-user) using supabase.functions.invoke(), the browser's OPTIONS
preflight request fails with the following error:

Access to fetch at 'https://ghnwafrebtcnuqkbnans.supabase.co/functions/v1/create-user' from origin 'http://localhost:5173' has been
blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

The network call in the browser console shows net::ERR_FAILED for the POST request, preceded by a failed OPTIONS request.

What I've Tried:
The issue does not seem to be with the function code itself, as we have tried multiple standard implementations for handling CORS
preflight requests. All of them result in the same error, suggesting the request is being blocked before the function code is executed.

Here is the current code for one of the functions (create-user), which includes a standard CORS handler:

`typescript
import { serve } from "https://deno.land/[email protected]/http/server.ts"
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'

const corsHeaders = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
'Access-Control-Allow-Methods': 'POST, OPTIONS',
}

serve(async (req) => {
// Handle preflight OPTIONS request
if (req.method === 'OPTIONS') {
return new Response('ok', { headers: corsHeaders })
}

try {
  const supabaseAdmin = createClient(
    Deno.env.get('SUPABASE_URL') ?? '',
    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
  )

  const { email, password, role } = await req.json()


  const { data: userData, error: createError } = await supabaseAdmin.auth.admin.createUser({
    email: email,
    password: password,
    email_confirm: true,
  })

  if (createError) throw createError


  if (role) {
    const { error: updateError } = await supabaseAdmin
      .from('profiles')
      .update({ role: role })
      .eq('id', userData.user.id)

    if (updateError) throw updateError
  }


  return new Response(JSON.stringify({ user: userData.user }), {
    headers: { ...corsHeaders, 'Content-Type': 'application/json' },
    status: 200,
  })
} catch (error) {
  return new Response(JSON.stringify({ error: error.message }), {
    headers: { ...corsHeaders, 'Content-Type': 'application/json' },
    status: 400,
  })
}

})

`

Question:
Since the preflight request seems to be failing before the function code is executed, could this be a project-level network configuration
issue? Is there anything else I can check or do to resolve this?

Thank you for your help!

[GaryAustin1]

There is no configuration for CORs outside of the code in the Edge function.
Any useful log info? Does the function run?
Are you passing in any custom headers?

Also not related to CORs but are you using the new API keys? If so then you need to turn off JWT checking for the Edge function and handle internally if needed.