Supabase CORS errors from browser fix

Browser blocks requests due to missing CORS headers in Supabase config. Enable CORS in project settings and configure allowed origins.

Cause

Supabase API requests from browsers fail with CORS (Cross-Origin Resource Sharing) errors when your project's CORS settings don't include your domain.

``` Access to XMLHttpRequest at 'https://your-project.supabase.co/rest/v1/...' from origin 'http://localhost:3000' has been blocked by CORS policy ```

Quick Fix

1. Go to Supabase Dashboard → Your Project → Settings → API 2. Scroll to CORS Configuration 3. Add your domain to allowed origins: - Development: http://localhost:3000 - Production: https://yourdomain.com 4. Save changes (takes 30 seconds to propagate)

```javascript // Verify it works const { data, error } = await supabase .from('your_table') .select('*'); ```

Prevention

Configure properly from start:

1. Use environment variables for your Supabase URL/key: ```javascript const supabase = createClient( process.env.REACT_APP_SUPABASE_URL, process.env.REACT_APP_SUPABASE_ANON_KEY ); ```

2. Add all environments to CORS: - http://localhost:3000 (dev) - http://localhost:5173 (Vite dev) - https://yourdomain.com (prod) - https://staging.yourdomain.com (staging)

3. Use wildcards carefully (not recommended for production): ``` http://localhost:* (localhost any port) https://*.yourdomain.com (subdomains) ```

4. Check browser console for exact origin: ```javascript console.log(window.location.origin); // Copy-paste exact value to CORS settings ```

Common gotchas:

For mobile/Expo apps: Supabase is accessible from native apps without CORS issues since they don't use browsers.