Supabase: CORS errors from browser [2026 fix]

Browser blocks Supabase requests due to missing CORS headers. Fix: Configure allowed origins in Project Settings > API > CORS or use a backend proxy.

Supabase CORS Errors from Browser – Emergency Fix Guide

TL;DR

Cause: Your browser is blocking requests to Supabase because the origin isn't whitelisted in Supabase's CORS settings. Fix: Add your domain to Supabase Project Settings > API Configuration > CORS Allowed Origins (or use a backend proxy for production).

---

Real Console Error Messages

Here are the exact errors you'll see in DevTools Console:

``` Access to XMLHttpRequest at 'https://[YOUR-PROJECT].supabase.co/rest/v1/users' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ```

``` Fetch error: TypeError: Failed to fetch (CORS policy: response to preflight request doesn't pass access control check) ```

``` CORS error: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode (include) is 'include'. ```

``` Access to fetch at 'https://[PROJECT].supabase.co/auth/v1/signup' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ```

``` PreflightResponse: {"code":"CORS_NO_MATCH","message":"Origin not allowed"} ```

---

Broken vs. Fixed Code

Scenario 1: Missing CORS Configuration in Project

❌ BROKEN: ```javascript // Frontend: localhost:3000 import { createClient } from '@supabase/supabase-js'

const supabase = createClient( 'https://myproject.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' )

// This will CORS error if localhost:3000 isn't in allowed origins const { data, error } = await supabase .from('users') .select('*') ```

✅ FIXED: 1. Go to Supabase Dashboard → Your Project → Settings → API 2. Scroll to "CORS Allowed Origins" 3. Add: http://localhost:3000 (development) and https://myapp.com (production) 4. Click "Update" 5. Refresh browser (hard refresh: Ctrl+Shift+R or Cmd+Shift+R)

```javascript // Same code now works because origin is whitelisted const { data, error } = await supabase .from('users') .select('*') ```

Scenario 2: Credentials Not Included in Request

❌ BROKEN: ```javascript // Missing credentials mode for authenticated requests const response = await fetch( 'https://myproject.supabase.co/rest/v1/users', { headers: { 'Authorization': Bearer ${token}, 'Content-Type': 'application/json' } // credentials: 'include' is missing } ) ```

✅ FIXED: ```javascript const response = await fetch( 'https://myproject.supabase.co/rest/v1/users', { headers: { 'Authorization': Bearer ${token}, 'Content-Type': 'application/json' }, credentials: 'include' // Add this line } ) ```

Scenario 3: Wildcard CORS (Not Recommended)

⚠️ TEMPORARY: If you're debugging locally and CORS settings aren't updating:

```javascript // Use a backend proxy instead (production-safe) // API call to YOUR backend: GET /api/users // Your backend calls Supabase with service role key

const response = await fetch('/api/users') // Your domain, no CORS issues const data = await response.json() ```

WHY: Never use wildcard * in CORS for Supabase. Always specify exact origins. Backend proxies are safer for production.

---

Still Broken? Check These Too

1. Supabase CLI Out of Sync - If you're running supabase start locally, verify the anon key matches your browser's configuration - Run supabase status to confirm local instance is running on port 54321

2. Browser Cache & Service Workers - Clear cache: DevTools → Storage → Clear All → Hard Refresh (Cmd+Shift+R) - If using service workers, clear them: DevTools → Application → Service Workers → Unregister

3. Supabase Project Paused - Check dashboard: if project shows "paused" (free tier inactive 7+ days), restart it - API won't respond with CORS headers if project is paused

---

Key Points (Version Uncertainty)

  • Supabase JS Client (v2.x+): Automatically handles CORS if origin is configured. No special setup needed beyond dashboard settings.
  • Self-hosted Supabase: CORS is configured via environment variable CORS_ALLOW_LIST in Docker/Kubernetes. If uncertain of your version, check supabase --version or your deployment docs.
  • ---

    Still Broken?

    Check [CORS troubleshooting best practices](/?guide=cors-basics) and [debugging auth errors](/?guide=supabase-auth-debug).

    Official Docs: [Supabase CORS Configuration](https://supabase.com/docs/guides/api#cors)

    ---

    Found a different variation? Drop it in the comments.

    🔥 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