Supabase: CORS errors from browser [2026 fix]

Browser blocks Supabase requests due to missing CORS headers. Add your domain to Supabase project settings or use proper auth headers.

Supabase CORS Errors from Browser: 2am Emergency Fix

TL;DR

Cause: Your browser domain isn't authorized in Supabase's CORS whitelist, so the preflight OPTIONS request fails. Fix: Add your frontend domain to Supabase project settings under "API" → "CORS allowed origins" or authenticate requests with proper Authorization headers.

---

Exact Error Messages You're Seeing

``` 1. Access to XMLHttpRequest at 'https://xxxxx.supabase.co/rest/v1/users' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control checks: No 'Access-Control-Allow-Origin' header is present on the requested resource.

2. Fetch error: Failed to fetch from supabase endpoint Origin http://your-app.com is not permitted to access this resource

3. POST https://xxxxx.supabase.co/rest/v1/auth/v1/token net::ERR_FAILED CORS policy: No 'Access-Control-Allow-Credentials' header

4. The CORS protocol does not allow specifying a wildcard (*) for credentials mode 'include'

5. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://xxxxx.supabase.co/rest/v1/. (Reason: Credentials mode is 'include'). ```

---

Broken Code → Fixed Code

❌ BROKEN: Missing CORS headers, wildcard credentials

```javascript // client.js - WILL FAIL import { createClient } from '@supabase/supabase-js'

const supabase = createClient( 'https://xxxxx.supabase.co', 'eyJhbGciOiJIUzI1NiIs...' )

// Browser request without auth header const { data, error } = await supabase .from('users') .select('*') .eq('id', 123)

// fetch() call with wrong credentials mode fetch('https://xxxxx.supabase.co/rest/v1/users', { method: 'GET', credentials: 'include' // ← CORS will block this }) ```

✅ FIXED: Proper auth headers + correct setup

Option A: Use Supabase JS client (recommended) ```javascript // client.js - WORKS import { createClient } from '@supabase/supabase-js'

const supabase = createClient( 'https://xxxxx.supabase.co', 'eyJhbGciOiJIUzI1NiIs...', { auth: { persistSession: true, autoRefreshToken: true } } )

// JS client handles auth headers automatically const { data, error } = await supabase .from('users') .select('*') .eq('id', 123) ```

Option B: Raw fetch() with proper headers ```javascript // Direct API call - include Authorization header const response = await fetch( 'https://xxxxx.supabase.co/rest/v1/users?id=eq.123', { method: 'GET', headers: { 'apikey': 'your-public-anon-key-here', 'Authorization': 'Bearer ' + sessionToken, 'Content-Type': 'application/json' }, credentials: 'omit' // ← Use 'omit', not 'include' } ) ```

Supabase Dashboard Config: 1. Go to your project → SettingsAPI 2. Under "CORS allowed origins", add: ``` http://localhost:3000 https://your-production-domain.com https://www.your-production-domain.com ``` 3. Click "Save" 4. Wait 10-30 seconds for propagation

---

Version-Specific Behavior

Uncertainty: Supabase's CORS header caching behavior changed between SDK versions pre-2024 and 2025+. If adding domains to settings doesn't work within 60 seconds, your CDN edge location may be serving stale config. We cannot guarantee exact propagation timing without checking your specific deployment. Contact Supabase support if it's been >2 minutes.

---

Still Broken? Check These Too

1. Wrong API key region — Verify https://xxxxx.supabase.co matches your actual project URL (check Supabase dashboard). Copy-paste errors here cause silent CORS failures.

2. Using service role key in browser — Never expose your service_role key to frontend. Always use the public anon key. Service role keys bypass RLS and trigger security blocks.

3. Row Level Security (RLS) blocking silently — Even with CORS fixed, RLS policies can reject queries. Check Supabase logs: SettingsLogs → filter by "auth". Look for policy_violation errors.

---

Related Guides

  • [Supabase Authentication Setup](/guide=supabase-auth-setup)
  • [Next.js Server Components with Supabase](/guide=nextjs-supabase-ssr)
  • ---

    Official Documentation

    [Supabase CORS Configuration](https://supabase.com/docs/guides/api/cors) [Supabase Security & RLS](https://supabase.com/docs/guides/auth/row-level-security)

    ---

    Found a different variation? Drop it in the comments — CORS issues often hide subtle environment-specific details we want to document.

    🔥 0d
    LIVE
    PlanetScale rage spiking Vercel pricing complaints Railway gaining fast Supabase happiness rising Resend loved by devs PlanetScale rage spiking Vercel pricing complaints Railway gaining fast Supabase happiness rising
    DEVELOPER PAIN RADAR // Loading...

    Developers complain.
    Opportunities appear.

    We track what developers are struggling with today — and what opportunities that creates.

    guides today
    avg happiness
    🔥 Pain
    📖 Guides
    🔭 Explore
    👤 Mine
    🔥 Pain Radar — rage scores today
    ↗ share
    💡 Opportunity Feed — pain = market gap
    📈 Tool Momentum
    all scores →
    📖 Latest Guide
    all guides →
    📖 All Guides
    📊 Tool Scores
    + Submit
    📰 Hacker News
    ➕ Submit a Tool
    ← back