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 Troubleshooting Guide

TL;DR

Cause: Your browser is blocking Supabase API requests because your domain isn't in the CORS allowlist.

Fix: Add your domain to Supabase project settings: Settings > API > CORS Allowed Origins (include https:// prefix and exact port if applicable).

---

Console Error Messages (Real Examples)

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

2. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://[project].supabase.co/rest/v1/auth/v1/user. (Reason: CORS request did not succeed). Status code: (null).

3. Failed to fetch TypeError: NetworkError when attempting to fetch resource.

4. Access to XMLHttpRequest at 'https://[project].supabase.co/rest/v1/posts' from origin 'https://myapp.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check.

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

---

Broken Code vs. Fixed Code

Problem 1: Domain Not in CORS Allowlist

BROKEN CODE (Client-side – this will fail): ```javascript // This code is fine, but Supabase API rejects it if domain isn't whitelisted import { createClient } from '@supabase/supabase-js';

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

// This fetch fails with CORS error const { data, error } = await supabase .from('users') .select('*'); ```

FIXED (Backend configuration – NOT code):

1. Go to [Supabase Dashboard](https://app.supabase.com) 2. Select your project 3. Navigate: Settings > API > CORS Allowed Origins 4. Click Add Origin 5. Enter exactly: http://localhost:3000 (or your production domain: https://myapp.vercel.app) 6. Click Save 7. Wait 30-60 seconds for propagation 8. Hard refresh browser (Ctrl+Shift+R or Cmd+Shift+R) 9. Test again

Problem 2: Port Number Mismatch

BROKEN (Missing port in CORS settings): ``` Frontend running at: http://localhost:3001 Supabase CORS Allowed Origins: http://localhost:3000 ↓ Result: CORS blocked ```

FIXED (Add exact port): ``` Frontend: http://localhost:3001 Supabase CORS Origins: http://localhost:3001 ← exact match required ```

Problem 3: HTTP/HTTPS Mismatch

BROKEN: ``` Frontend: https://myapp.com CORS setting: http://myapp.com ← protocol doesn't match ↓ Blocked ```

FIXED: ``` Frontend: https://myapp.com CORS setting: https://myapp.com ← protocols match ```

---

Still Broken? Check These Too

1. Credentials/Auth Headers Not Sent

2. Wildcard Domain Issues

3. Cache & Service Worker Interference

---

Version Note

This guide covers Supabase REST API v1 (current as of 2026). If uncertain, check your project's actual REST endpoint version in Supabase Settings > API. The CORS configuration UI is consistent across versions, but endpoint URLs may differ.

---

Quick Verification

```bash

From terminal, verify Supabase responds with correct CORS headers

Look for: Access-Control-Allow-Origin: https://myapp.vercel.app

---

Related Resources

---

Found a different variation? Drop it in the comments – whether you hit CORS issues with Next.js, React Native, or specific regions, share your fix so others at 2am find the answer faster.