Supabase: CORS errors from browser [2026 fix]

Browser blocks Supabase API calls due to missing CORS headers. Add your domain to Supabase project settings or use proper authentication headers.

Supabase CORS Errors from Browser – Emergency Fix

TL;DR

Cause: Your browser is blocking requests to Supabase because your domain isn't whitelisted in CORS settings, or you're missing the Authorization header.

Fix: Add your frontend domain to Supabase project's CORS allowed origins, or initialize the Supabase client with proper API key in a secure context.

---

Real Console Error Messages

You'll see one of these exact errors:

``` 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 check: No 'Access-Control-Allow-Origin' header is present on the requested resource. ```

``` Cors policy: No 'access-control-allow-credentials' header was present in the requested resource ```

``` Access to fetch at 'https://xxxxx.supabase.co/rest/v1/...' from origin 'https://myapp.com' has been blocked by CORS policy: Request header content-type is not allowed by Access-Control-Allow-Headers. ```

``` net::ERR_FAILED Status Code: (Pending) - This request was blocked by the browser extension or firewall. ```

``` OPTIONS https://xxxxx.supabase.co/rest/v1/users 403 (Forbidden) ```

---

Broken Code vs. Fixed Code

Problem 1: Missing Domain in CORS Settings

BROKEN: ```javascript // Your React app at https://myapp.com const { data, error } = await supabase .from('users') .select('*') // ❌ Fails because myapp.com isn't whitelisted ```

FIXED: ```javascript // Step 1: Go to Supabase Dashboard → Project Settings → API → CORS // Step 2: Add your domain under "Allowed origins": // - https://myapp.com // - https://www.myapp.com // - http://localhost:3000 (for local dev) // Step 3: Retry the same code - it now works

const { data, error } = await supabase .from('users') .select('*') // ✅ Now succeeds ```

Problem 2: Supabase Client Not Initialized Correctly

BROKEN: ```javascript import { createClient } from '@supabase/supabase-js'

// Exposed API key in browser - CORS still fails const supabase = createClient( 'https://xxxxx.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // ❌ Wrong ) ```

FIXED: ```javascript import { createClient } from '@supabase/supabase-js'

// Use environment variables - API key still exposed in browser, // but Supabase client handles preflight correctly const supabase = createClient( process.env.REACT_APP_SUPABASE_URL, process.env.REACT_APP_SUPABASE_ANON_KEY )

// Ensure your .env file has: // REACT_APP_SUPABASE_URL=https://xxxxx.supabase.co // REACT_APP_SUPABASE_ANON_KEY=your-public-anon-key ```

Problem 3: Fetch Request Missing Headers

BROKEN: ```javascript // Direct fetch without Content-Type header const response = await fetch( 'https://xxxxx.supabase.co/rest/v1/users', { method: 'GET' // ❌ Missing headers } ) ```

FIXED: ```javascript // Fetch with proper Supabase headers const response = await fetch( 'https://xxxxx.supabase.co/rest/v1/users', { method: 'GET', headers: { 'Authorization': Bearer ${supabaseAnonKey}, 'Content-Type': 'application/json', 'apikey': supabaseAnonKey } } ) // ✅ CORS preflight passes ```

---

Still Broken? Check These Too

1. Wrong environment variable format – Ensure REACT_APP_SUPABASE_URL starts with https:// and ends with .supabase.co. Typos prevent initialization.

2. Supabase project in sleep mode – Free-tier projects pause after inactivity. Check Dashboard → Status. If paused, access any page to wake it.

3. Browser extensions blocking requests – Privacy extensions (uBlock Origin, Privacy Badger) sometimes block API calls. Test in incognito mode or whitelist *.supabase.co.

---

Related Guides

---

Official Documentation

[Supabase CORS Configuration Guide](https://supabase.com/docs/guides/realtime/concepts#cors)

[Supabase JS Client Initialization](https://supabase.com/docs/reference/javascript/initializing)

---

Version Notes

This guide applies to @supabase/supabase-js v2.x and later. If using v1.x (deprecated), upgrade immediately: npm install @supabase/supabase-js@latest. CORS behavior is consistent across versions, but client initialization syntax changed in v2.

---

Quick Checklist Before Escalating

---

Found a different variation? Drop it in the comments below – we update this guide based on community reports.