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 Supabase project settings.

Supabase CORS Errors from Browser: 2am Production Fix

TL;DR

---

Exact Error Messages You're Seeing

Open DevTools Console (F12) and look for these:

``` Access to XMLHttpRequest at 'https://xxxxx.supabase.co/rest/v1/users' from origin 'https://yourapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ```

``` Failed to load resource: the server responded with a status of 401 (Unauthorized) No 'Access-Control-Allow-Credentials' header was present in the CORS request ```

``` CORS error: Access to XMLHttpRequest at 'https://xxxxx.supabase.co/rest/v1/' from origin 'http://localhost:3000' blocked by CORS policy ```

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

``` OPTIONS https://xxxxx.supabase.co/rest/v1/users 403 (Forbidden) Response to preflight request doesn't pass access control checks ```

---

The Problem & The Fix: Side by Side

❌ Broken Setup

Your Supabase project has no CORS origins configured or only localhost is whitelisted:

```javascript // Your frontend code (this is FINE) const supabase = createClient( 'https://xxxxx.supabase.co', 'eyJhbGciOiJIUzI1NiIs...' );

// Calling from https://yourapp.com in production const { data, error } = await supabase .from('users') .select('*');

// ❌ Browser blocks this automatically before it even reaches Supabase ```

What's happening: The preflight OPTIONS request fails because https://yourapp.com isn't in Supabase's CORS whitelist.

✅ The Exact Fix

Step 1: Go to [Supabase Dashboard](https://supabase.com/dashboard) → Your Project → Settings → API

Step 2: Find the section "CORS allowed origins" (exact label varies by dashboard version, may also be under "Authentication" tab)

Step 3: Add your domain: ``` https://yourapp.com https://www.yourapp.com https://api.yourapp.com ```

Step 4: If using subdomains or staging, add each one: ``` https://staging.yourapp.com https://dev.yourapp.com ```

Step 5: Click Save and wait 30-60 seconds for propagation

Step 6: Your code stays the same—no changes needed: ```javascript const supabase = createClient( 'https://xxxxx.supabase.co', 'eyJhbGciOiJIUzI1NiIs...' );

const { data, error } = await supabase .from('users') .select('*');

// ✅ Now works—browser allows the request ```

---

Why This Happens

Supabase enforces CORS (Cross-Origin Resource Sharing) at the API gateway level. When your browser makes a request from https://yourapp.com to https://xxxxx.supabase.co, the browser first sends an OPTIONS preflight request. Supabase only responds with the necessary Access-Control-Allow-Origin header if your domain is explicitly whitelisted. If it's not, the browser blocks the entire request chain.

Note on versions: Supabase's dashboard interface has evolved through 2024-2026. The CORS settings location may be under "API", "Authentication", or "Network" depending on your dashboard version. If you don't find it, check the official docs link below.

---

Still Broken? Check These Too

1. Localhost still blocked in production: You added http://localhost:3000 to CORS origins but removed it when deploying. Remove localhost from production CORS settings—it's a security risk and doesn't work cross-domain anyway. [Debug localhost issues](/?guide=supabase-localhost-dev).

2. Wildcard domain won't work: Supabase doesn't accept *.yourapp.com as a CORS origin. Add each subdomain explicitly: https://staging.yourapp.com, https://api.yourapp.com, etc.

3. Port mismatch on local dev: Using http://localhost:3000 in one place and http://127.0.0.1:3000 in another? They're different origins to the browser. Use one consistently or add both to CORS. [More on auth session issues](/?guide=supabase-auth-session-lost).

4. Cached preflight responses: Browser caches CORS preflight for up to 10 minutes. Hard refresh (Ctrl+Shift+R) or clear site data after updating CORS settings.

5. Wrong Supabase endpoint: Verify you're using https://xxxxx.supabase.co not http:// (unencrypted). Check your .env file.

---

Official Resources

---

Found a different variation? Drop it in the comments. (Weird port issue? Auth token header missing? Custom fetch wrapper breaking CORS? Share it.)