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.

Supabase CORS Errors from Browser – Fast Fix

TL;DR

---

Real Console Error Messages

Here are the exact errors you'll see at 2am:

``` 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: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://YOUR_PROJECT.supabase.co/auth/v1/signup. (Reason: CORS header 'Access-Control-Allow-Origin' missing). ```

``` Error: [Failed] No 'Access-Control-Allow-Origin' header is present on the requested resource. Status Code: 0 Net::ERR_FAILED ```

``` OPTIONS https://YOUR_PROJECT.supabase.co/rest/v1/users 403 Forbidden Preflight request failed. ```

``` TypeError: Failed to fetch at async loginUser (auth.js:45) Status: 0, StatusText: "" ```

---

Broken Code → Fixed Code

❌ BROKEN: Request without CORS setup

```javascript // Your frontend code (works locally with proxy, breaks in production) import { createClient } from '@supabase/supabase-js';

const supabase = createClient( 'https://YOUR_PROJECT.supabase.co', 'YOUR_ANON_KEY' );

// This will throw CORS error in production const { data, error } = await supabase .from('users') .select('*'); ```

✅ FIXED: Configure CORS in Supabase Dashboard

Step 1: Go to Supabase Dashboard → Your Project → Settings → API

Step 2: Scroll to "CORS Settings" and add your domains:

``` http://localhost:3000 https://myapp.com https://www.myapp.com https://*.myapp.com ```

Step 3: Your JavaScript code stays the same:

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

const supabase = createClient( 'https://YOUR_PROJECT.supabase.co', 'YOUR_ANON_KEY' );

// Now this works! CORS headers are properly set by Supabase const { data, error } = await supabase .from('users') .select('*'); ```

---

Why This Happens

When your browser makes a cross-origin request (from localhost:3000 to supabase.co), it sends an OPTIONS preflight request. Supabase only responds with Access-Control-Allow-Origin headers if your domain is whitelisted. Without it, the browser blocks the actual request—even if your API key is valid.

We're uncertain about: Whether custom CORS rules apply differently across Supabase regions (US vs EU vs APAC). Check your region-specific documentation if adding origins doesn't resolve the issue.

---

Still Broken? Check These Too

1. Wrong project URL in createClient() Verify you're using your actual project URL (not example placeholder). Go to Settings > API > Project URL and copy the exact URL.

2. Wildcard domain misconfiguration Using https://*.myapp.com? Make sure it includes the root: also add https://myapp.com separately. Wildcards don't automatically cover the base domain.

3. Environment variable not loaded If using .env.local, verify the build process picked it up. Try console.log(process.env.REACT_APP_SUPABASE_URL) to confirm. Rebuild if changed.

---

Quick Checklist

---

Related Issues

---

Official Documentation

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

---

Found a different variation? Drop it in the comments—we update this guide based on real reader issues.