Supabase: CORS errors from browser [2026 fix]

Browser blocks Supabase requests due to missing CORS headers in project settings. Fix: Enable specific origins in Auth > CORS settings or use dynamic environment variables.

Supabase: CORS Errors from Browser – 2AM Emergency Fix

TL;DR

---

Real Console Error Messages

You'll see one of these in your browser dev tools:

``` Access to XMLHttpRequest at 'https://YOUR_PROJECT.supabase.co/auth/v1/token' 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: POST https://YOUR_PROJECT.supabase.co/rest/v1/users Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. ```

``` Failed to fetch TypeError: Failed to fetch (shows in Network tab as preflight OPTIONS request returning 403) ```

``` [SUPABASE] Something went wrong Fetch failed: cors ```

``` No 'Access-Control-Allow-Credentials' header is present on the requested resource (when making authenticated requests) ```

---

Broken vs. Fixed Code

Example 1: Basic Auth Setup

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

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

// Later in your app... await supabase.auth.signUp({ email: 'user@example.com', password: 'password123' }) // ❌ CORS error in browser ```

FIXED: ```javascript // Step 1: Go to Supabase Dashboard > Project Settings > Auth // Step 2: Add these URLs to "Site URL" and "CORS Allowed Origins": // - http://localhost:3000 (dev) // - https://yourdomain.com (production) // - https://www.yourdomain.com (if applicable)

import { createClient } from '@supabase/supabase-js'

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

await supabase.auth.signUp({ email: 'user@example.com', password: 'password123' }) // ✅ Request succeeds ```

Example 2: Dynamic Environment Variables

BROKEN (hardcoded domain): ```typescript // .env.local VITE_SUPABASE_URL=https://project.supabase.co VITE_SUPABASE_KEY=abc123

// app.tsx – only works on one domain const client = createClient( import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_KEY ) ```

FIXED (add all origins to dashboard): ```typescript // Same .env setup, but in Supabase Dashboard > Auth: // CORS Allowed Origins = // http://localhost:3000 // http://localhost:5173 // https://staging.yourdomain.com // https://yourdomain.com

// Code stays the same, Supabase accepts all listed origins const client = createClient( import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_KEY ) ```

---

Step-by-Step Dashboard Fix

1. Dashboard: Log into your Supabase project 2. Left sidebar: Click "Settings" (⚙️ icon) 3. Tab: "Auth" or "Authentication" 4. Find: "Site URL" field – set to your primary domain 5. Find: "CORS Allowed Origins" – add each domain on separate lines: ``` http://localhost:3000 http://localhost:5173 https://yourdomain.com https://www.yourdomain.com https://staging.yourdomain.com ``` 6. Save – no deploy needed 7. Hard refresh your app (Cmd+Shift+R / Ctrl+Shift+R)

---

Version Note

Uncertain behavior: Supabase v1 and v2 handle CORS configuration identically in the dashboard as of 2026. However, if you're using Supabase Realtime or Edge Functions, additional CORS headers may be required. Check your specific version in package.json and [official docs](https://supabase.com/docs/guides/auth/managing-user-sessions#CORS) if issues persist.

---

Still Broken? Check These Too

1. Check browser localhost port mismatch Your app runs on localhost:3000 but you added localhost:5173 to CORS? Supabase matches exact origins. Add both.

2. Protocol mismatch (http vs https) Added https://yourdomain.com but your app runs on http://localhost:3000? Add both. Production HTTPS with dev HTTP requires both entries.

3. Cached browser request The browser caches preflight responses. After updating CORS settings: hard refresh (Cmd+Shift+R), clear cache in DevTools > Network tab, or use incognito/private window to test immediately.

---

Related Guides

---

Official Documentation

📖 [Supabase Authentication – CORS Configuration](https://supabase.com/docs/guides/auth/managing-user-sessions#CORS) 📖 [Supabase API Reference](https://supabase.com/docs/reference/javascript/introduction)

---

Found a different variation? Drop it in the comments.