Supabase Edge Function CORS error — still failing even with @supabase/supabase-js v2.95.0 and later

I'm building a web app using TypeScript, React, Vite, shadcn/ui, and Supabase as my backend. My local frontend runs on http://localhost:5173.

The problem is I cannot get past a CORS policy error when invoking a Supabase Edge Function from my frontend, I keep getting these errors:

generator:1 Access to fetch at 'https://iqmcrmzpscxntgqyatwg.supabase.co/functions/v1/generate-roadmap' 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. iqmcrmzpscxntgqyatwg.supabase.co/functions/v1/generate-roadmap:1 Failed to load resource: net::ERR_FAILED RoadmapContext.tsx:98 Edge Function error: FunctionsFetchError: Failed to send a request to the Edge Function at FunctionsClient.js:259:27 (anonymous) @ RoadmapContext.tsx:98 RoadmapContext.tsx:127 Generate roadmap error: Error: Failed to send a request to the Edge Function at RoadmapContext.tsx:111:17 at async onSubmit (RoadmapGeneratorPage.tsx:39:23) at async index.esm.mjs:2344:17 (anonymous) @ RoadmapContext.tsx:127 RoadmapGeneratorPage.tsx:52 Roadmap generation error: Failed to send a request to the Edge Function

even after trying multiple recommended solutions:

Using the official Supabase CORS helper

import { corsHeaders } from '@supabase/supabase-js/cors' Deno.serve(async (req) => { if (req.method === 'OPTIONS') { return new Response('ok', { headers: corsHeaders }) } try { const { name } = await req.json() return new Response(JSON.stringify({ message: `Hello ${name}!` }), { 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, }) } })

Creating a custom cors.ts file

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

And importing it inside the function:

import { corsHeaders } from '../_shared/cors.ts';

Ensuring the frontend invokes the function correctly

const { data, error } = await supabase.functions.invoke('generate-roadmap', { body: { name: 'Supabase' }, });

And I even added allowed origins in Supabase dashboard

Despite all of this, the browser still blocks the request with a CORS error. The preflight OPTIONS request fails before the function even runs.

I've seen GitHub discussions about a Supabase CORS regression, but I'm not sure if that's what I'm hitting or if my setup is wrong.

What I need help with:

Is there something wrong with my Edge Function CORS setup?

Do Supabase Edge Functions require additional headers beyond corsHeaders?

Is this a known Supabase bug, and is there a workaround?

How can I allow requests from http://localhost:5173 during development?