Supabase: CORS errors from browser [2026 fix]

Browser blocks Supabase requests due to missing CORS headers. Add your domain to Supabase project settings under API > CORS allowed origins.

Supabase CORS Errors from Browser – 2am Emergency Fix

TL;DR

---

Exact Error Messages You're Seeing

Here are the real console errors that indicate this problem:

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

``` Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://your-project.supabase.co/rest/v1/auth/v1/token (Reason: CORS header 'Access-Control-Allow-Origin' missing). ```

``` Failed to fetch from supabase: TypeError: Failed to fetch No 'Access-Control-Allow-Origin' header is present on the requested resource with credentials mode ('include'). ```

``` [Supabase] Auth session error: FetchError – 403 Forbidden Response headers don't include the necessary CORS headers for this origin. ```

``` Unexpected end of JSON input while calling signIn at supabase.auth.signInWithPassword CORS preflight failed with status 403 ```

---

Broken Code vs. Exact Fix

❌ BROKEN: No CORS Configuration

```javascript // app.ts – This will fail in production import { createClient } from '@supabase/supabase-js';

const supabase = createClient( 'https://your-project.supabase.co', 'YOUR_ANON_KEY' );

// Later in your component const { data, error } = await supabase .from('users') .select('*'); // ^ CORS error in browser, works fine in server ```

Why it breaks: Supabase receives the request but rejects it at the browser level because your domain (e.g., localhost:3000, app.example.com) isn't in the allowed origins list.

---

✅ FIXED: Add Domain to Supabase Settings

Step 1: Go to Supabase Dashboard 1. Navigate to your project 2. Click Settings (gear icon, bottom-left) 3. Select API from the sidebar 4. Scroll to CORS Allowed Origins

Step 2: Add Your Domain

Add these origins (one per line or as comma-separated): ``` http://localhost:3000 https://app.example.com https://www.example.com ```

For production: Use https://yourdomain.com exactly as users access it (with or without www, but be explicit).

For development: Include all local variants: ``` http://localhost:3000 http://localhost:5173 http://127.0.0.1:3000 http://[::1]:3000 ```

Step 3: Your Code Stays the Same

```javascript // app.ts – This now works! import { createClient } from '@supabase/supabase-js';

const supabase = createClient( 'https://your-project.supabase.co', 'YOUR_ANON_KEY' );

const { data, error } = await supabase .from('users') .select('*'); // ^ Now the browser allows this request ✓ ```

Step 4: Save & Wait

Click Save. Changes propagate in ~30 seconds. Hard-refresh your browser (Cmd+Shift+R / Ctrl+Shift+R) to clear cached headers.

---

Version & Behavior Notes

This fix applies to Supabase v2 and later (all current versions as of 2026). Older v1 projects used deprecated auth endpoints—we're uncertain if CORS behavior differed; if you're on legacy infrastructure, check the official docs link below.

---

Still Broken? Check These Too

1. Wildcard doesn't work: Supabase requires explicit domains; * or *.example.com patterns aren't supported. List each domain individually.

2. Trailing slashes matter: Use https://example.com not https://example.com/. Some frameworks auto-add slashes; test both variations in settings.

3. Port mismatches in dev: If your app runs on 3001 but you added localhost:3000, it will fail. Match your exact dev port number.

4. Cached API keys: If you changed CORS after your app started, your API client may have cached the old headers. [See auth token refresh guide](/?guide=supabase-refresh-token) for session clearing.

5. Edge function vs REST API: Edge Functions have separate CORS rules. If you're calling an Edge Function, check the --cors flag in your function definition. [Edge Functions CORS setup](/?guide=supabase-edge-cors).

---

Official Resources

---

Found a different variation? Drop it in the comments

If you hit a CORS error with a different stack trace, different root cause, or a Supabase version-specific workaround, reply below. We'll add it to this guide.