Supabase: CORS errors from browser [2026 fix]

Browser blocks requests to Supabase API due to missing CORS headers. Add your domain to project settings or use API Gateway.

Supabase: CORS Errors from Browser – Emergency Fix

TL;DR

---

Real Console Error Messages

Here are the exact errors you're seeing right now:

``` Access to XMLHttpRequest at 'https://your-project.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. ```

``` Failed to load resource: the server responded with a status of 403 (Forbidden) Response headers: x-request-id: req_abc123xyz content-type: application/json ```

``` supabase.js:45 POST https://your-project.supabase.co/rest/v1/auth/v1/token?grant_type=password 403 (Forbidden) ```

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

``` No 'Access-Control-Allow-Methods' header is present on the requested resource. If an CORS request is successful with HTTP method other than GET or POST. ```

---

Broken Code vs. Fixed Code

Problem 1: No CORS Configuration in Project Settings

BROKEN: ```javascript // Your frontend tries to call Supabase directly const supabase = createClient( 'https://your-project.supabase.co', 'YOUR_ANON_KEY' );

// This request gets blocked at browser level await supabase .from('users') .select('*') .then(data => console.log(data)); // ❌ CORS error in console ```

FIXED: 1. Go to [Supabase Dashboard](https://app.supabase.com) → Your Project 2. Click Settings → API 3. Scroll to CORS allowed origins 4. Add your domains: - http://localhost:3000 (development) - https://yourdomain.com (production) - https://www.yourdomain.com (if using www) 5. Click Save

```javascript // After adding CORS origins, same code now works const supabase = createClient( 'https://your-project.supabase.co', 'YOUR_ANON_KEY' );

await supabase .from('users') .select('*') .then(data => console.log(data)); // ✅ Request succeeds ```

Problem 2: Using Credentials But CORS Not Set Up

BROKEN: ```javascript // Sending credentials without proper CORS setup const supabase = createClient( 'https://your-project.supabase.co', 'YOUR_ANON_KEY', { auth: { persistSession: true, autoRefreshToken: true, } } );

// Requests fail with credentials error await supabase.auth.signInWithPassword({ email: 'user@example.com', password: 'password123' }); // ❌ CORS headers rejection ```

FIXED: Ensure your CORS entry includes your exact origin (with protocol). If using credentials, Supabase automatically handles Access-Control-Allow-Credentials: true after you add the origin.

```javascript // Same code, now CORS origins are configured const supabase = createClient( 'https://your-project.supabase.co', 'YOUR_ANON_KEY', { auth: { persistSession: true, autoRefreshToken: true, } } );

await supabase.auth.signInWithPassword({ email: 'user@example.com', password: 'password123' }); // ✅ Credentials flow succeeds ```

Problem 3: Wildcard CORS (Wrong Approach)

BROKEN: ``` // Tempting but insecure—don't do this CORS allowed origins: * ```

FIXED: ``` // Always specify exact origins CORS allowed origins: http://localhost:3000 http://localhost:5173 https://yourdomain.com https://www.yourdomain.com ```

---

Version-Specific Notes

⚠️ Important: CORS configuration UI location has remained consistent as of 2026, but if you're using Supabase before v1.50 (2024), verify the API section exists in Settings. We explicitly cannot guarantee behavior on versions before 2023; consult your version's docs if older.

---

Still Broken? Check These Too

1. Protocol Mismatch – CORS origin must match exactly. http://localhost:3000 ≠ https://localhost:3000. Check your dev server URL in the browser address bar.

2. DNS/Proxy Issues – If using a tunnel (ngrok, Cloudflare), add the tunnel URL to CORS origins, not localhost. Example: https://abc123.ngrok.io

3. Browser Cache – Hard refresh (Ctrl+Shift+R or Cmd+Shift+R) or clear browser cache. CORS headers are cached aggressively.

---

Related Guides

---

Official Documentation

📖 [Supabase CORS Configuration](https://supabase.com/docs/guides/api/cors) 📖 [Supabase Client Setup](https://supabase.com/docs/reference/javascript/initializing)

---

Found a different variation? Drop it in the comments below – your 2am fix could save someone else's night.