Supabase: CORS errors from browser [2026 fix]
Browser blocks requests to Supabase API due to missing CORS headers. Add your domain to Supabase project settings under API > CORS allowed origins.
Supabase CORS Errors from Browser: Complete 2am Fix Guide
TL;DR
Cause: Your browser is blocking requests to Supabase because your domain isn't in the project's CORS allowed origins list.
Fix: Add your domain to Supabase Dashboard → Project Settings → API → CORS allowed origins (include http://localhost:3000 for dev).
---
Console Error Messages (Real Examples)
You'll see one or more of these exact errors in your browser console:
``` Access to XMLHttpRequest at 'https://[PROJECT-ID].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) https://[PROJECT-ID].supabase.co/rest/v1/auth/v1/token?grant_type=password: No 'Access-Control-Allow-Origin' header is present on the requested resource. ```
``` CORS error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://[PROJECT-ID].supabase.co/rest/v1/. (Reason: CORS header 'Access-Control-Allow-Origin' missing). Status code: 403. ```
``` Error: Failed to fetch TypeError: Failed to fetch at async fetchUserProfile (index.js:42:1) ```
``` Fetch error: response status is 403 supabaseClient.from('table_name').select() returns 403 Forbidden ```
---
The Problem: Broken Code Example
```javascript // ❌ BROKEN: This will fail with CORS error if localhost:3000 isn't whitelisted import { createClient } from '@supabase/supabase-js';
const supabase = createClient( 'https://your-project.supabase.co', 'YOUR_ANON_KEY' );
// Called from http://localhost:3000 const { data, error } = await supabase .from('users') .select('*'); // CORS blocks this → "No 'Access-Control-Allow-Origin' header" ```
---
The Fix: Exact Solution
Step 1: Add Domain to Supabase CORS Settings
1. Go to [Supabase Dashboard](https://supabase.com/dashboard) 2. Select your project 3. Navigate to Settings → API 4. Find CORS allowed origins section 5. Add these entries (one per line): ``` http://localhost:3000 http://localhost:5173 https://yourdomain.com https://www.yourdomain.com ``` 6. Click Save
Step 2: Your Code Stays the Same (No Changes Needed!)
```javascript // ✅ SAME CODE NOW WORKS after CORS whitelist is updated import { createClient } from '@supabase/supabase-js';
const supabase = createClient( 'https://your-project.supabase.co', 'YOUR_ANON_KEY' );
// This now works from http://localhost:3000 ✓ const { data, error } = await supabase .from('users') .select('*');
if (error) console.error('Error:', error); else console.log('Success:', data); ```
What changed? Only the Supabase project settings—not your code.
Step 3: Clear Browser Cache & Hard Refresh
```bash
In browser DevTools (F12):
- Right-click refresh icon → "Empty cache and hard refresh"
- Or: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac)
```---
Why This Happens
Supabase REST API enforces CORS (Cross-Origin Resource Sharing) for security. Browsers enforce this too. If your origin (domain+port) isn't on the whitelist, browsers automatically block requests—even before reaching Supabase.
Version Note: This behavior is consistent across Supabase v1 and v2 as of 2026. We're not certain if Supabase v3 (if released) changes this mechanism—check [official CORS docs](https://supabase.com/docs/guides/platform/network-restrictions) if you're on a newer version.
---
Still Broken? Check These Too
1. Wrong Project URL? Verify you're using the correct PROJECT-ID.supabase.co URL from Settings → API → Project URL. Typos silently fail.
2. Anon Key Expired or Revoked? Go to Settings → API Keys and confirm your ANON_KEY hasn't been revoked. Rotate keys if suspicious.
3. Row Level Security (RLS) Blocking Reads? Even with CORS fixed, RLS policies might block your query. Check: Settings → Authentication → Policies. Ensure SELECT is enabled for your role (usually anon). See our [RLS debugging guide](/?guide=supabase-rls-denied).
4. Using Wrong HTTP Method? CORS preflight requests use OPTIONS. If your proxy or firewall blocks OPTIONS, requests fail. Verify your network allows all HTTP verbs.
5. Localhost Port Mismatch? Added http://localhost:3000 but running on port 5173? Each port is a different origin—add all of them separately.
---
Related Troubleshooting Guides
---
Official Resources
---
Found a different variation? Drop it in the comments.
CORS errors manifest differently across frameworks (Next.js, Vue, React Native, etc.). If you hit a unique error message or solution, comment below—community knowledge saves the next person's 2am debugging session.