Supabase CORS errors from browser fix

Browser blocks requests due to missing CORS headers in Supabase client config or API endpoints not whitelisted in project settings.

Cause

Supabase uses PostgREST API which requires proper CORS (Cross-Origin Resource Sharing) configuration. When your frontend makes requests from a different origin (domain/port), the browser blocks them if CORS headers aren't configured correctly.

```javascript // ❌ Common error in console Access to XMLHttpRequest at 'https://xxxx.supabase.co/rest/v1/...' from origin 'http://localhost:3000' has been blocked by CORS policy ```

Quick Fix

Step 1: Whitelist your frontend URL in Supabase Dashboard

``` http://localhost:3000 http://localhost:3001 https://yoursite.com https://www.yoursite.com ```

Step 2: Verify client initialization

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

const supabase = createClient( 'https://xxxx.supabase.co', 'your-anon-key', { auth: { autoRefreshToken: true, persistSession: true, }, } ) ```

Step 3: Check RLS policies if using authenticated requests

If using auth.user(), ensure your Row Level Security policies allow the operation:

```sql -- Example: Allow users to read their own data CREATE POLICY "Users can read own data" ON public.users FOR SELECT USING (auth.uid() = id); ```

Prevention

1. Use environment variables - Never hardcode URLs

```javascript const SUPABASE_URL = process.env.REACT_APP_SUPABASE_URL const SUPABASE_KEY = process.env.REACT_APP_SUPABASE_ANON_KEY ```

2. Test all origins - Add all environments upfront: - Local development - Staging - Production - Preview/PR deployments

3. Use wildcard cautiously - For development only: ``` http://localhost:* ``` Never use * alone in production.

4. Check browser console - CORS errors always show the blocked origin

5. Verify authentication - Some CORS issues mask auth problems: ```javascript const { data, error } = await supabase .from('table') .select() .catch(err => console.log('Full error:', err)) ```

Debug Checklist

Most 2am CORS fixes: add your localhost URL to allowed origins and restart. Done.