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