Supabase: CORS errors from browser [2026 fix]

Browser blocks Supabase requests due to missing CORS headers in your client config. Fix: add your domain to Project Settings > CORS or use proper anon key setup.

Supabase: CORS errors from browser [2026 fix]

TL;DR

Cause: Your browser is blocking Supabase API requests because your domain isn't whitelisted in CORS settings or your client is misconfigured.

Fix: Add your domain to Supabase Project Settings > API > CORS, or ensure you're initializing the client with the correct anon key and URL.

---

Exact Error Messages You'll See

Copy-paste these from your browser console:

``` 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 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'. ```

``` Failed to load resource: the server responded with a status of 403 (Forbidden) https://xxxxx.supabase.co/rest/v1/posts?select=* ```

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

``` Access-Control-Allow-Origin header missing. Request blocked. Status: 0 (net::ERR_FAILED) ```

---

Broken Code vs. Fixed Code

Problem 1: Missing Domain in CORS Whitelist

BROKEN: ```javascript // Supabase project initialized correctly, but domain not in CORS settings import { createClient } from '@supabase/supabase-js';

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

// This request fails with CORS error await supabase.from('users').select('*'); ```

FIXED: 1. Go to [Supabase Dashboard](https://app.supabase.com) > Your Project > Settings > API > CORS 2. Add your domain to the allowed list: - Development: http://localhost:3000, http://localhost:5173, etc. - Production: https://yourdomain.com 3. Click Save 4. Hard refresh browser (Ctrl+Shift+R or Cmd+Shift+R)

Code remains the same—the fix is in dashboard settings, not code.

---

Problem 2: Client Initialization with Wrong/Missing Anon Key

BROKEN: ```javascript const supabase = createClient( 'https://xxxxx.supabase.co', '' // Empty or wrong anon key );

await supabase.from('posts').select('*'); // CORS blocked ```

FIXED: ```javascript // Get correct anon key from Project Settings > API > Project API Keys const supabase = createClient( import.meta.env.VITE_SUPABASE_URL, // https://xxxxx.supabase.co import.meta.env.VITE_SUPABASE_ANON_KEY // eyJhbGc... );

await supabase.from('posts').select('*'); // Works ```

.env file: ``` VITE_SUPABASE_URL=https://xxxxx.supabase.co VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... ```

---

Problem 3: Using Service Role Key in Browser (Security + CORS Issue)

BROKEN: ```javascript // NEVER expose service role key to browser const supabase = createClient( 'https://xxxxx.supabase.co', 'sbp_service_role_secret_key_xxx' // This is public—bad! ); ```

FIXED: ```javascript // Always use anon key in browser, service role key only in backend const supabase = createClient( 'https://xxxxx.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // Anon key );

// For admin operations, call your own backend endpoint await fetch('/api/admin/create-user', { method: 'POST', body: ... }); ```

---

Still broken? Check these too

1. Browser cache and localStorage: Clear all site data for your domain (DevTools > Application > Clear storage). Old tokens or cached responses cause phantom CORS errors.

2. Third-party cookies blocked: If you're in private/incognito mode or have third-party cookies disabled, Supabase auth tokens may not persist. Check browser privacy settings.

3. Network tab shows 401/403, not preflight failure: If the preflight passes (OPTIONS request succeeds) but actual request fails with 401/403, your RLS (Row Level Security) policy is rejecting the query—not CORS. Check [RLS policies guide](/?guide=supabase-rls).

---

Version-Specific Notes

---

Official Resources

---

Related Guides

---

Found a different variation? Drop it in the comments.