How to Resolve CORS Errors in Lovable Full-Stack Applications

Why CORS errors happen in Lovable full-stack applications

CORS (Cross-Origin Resource Sharing) is a browser security policy that prevents web pages from making requests to a different domain than the one serving the page. When your Lovable app at your-app.lovable.app tries to call an API at api.openai.com, the browser blocks the request because the origins are different. This is not a bug in Lovable — it is how all browsers work. The browser sends a preflight OPTIONS request to the external API asking if your domain is allowed. If the API does not respond with the correct Access-Control-Allow-Origin header, the browser blocks the actual request and shows a CORS error in the console. Lovable's official position is clear: 'This is a Cross-Origin Resource Sharing (CORS) error... this is not something that the AI can fix for you since we don't control the server you are trying to communicate with.' The solution is to avoid making the cross-origin request from the browser entirely. Instead, create a server-side proxy (a Supabase Edge Function) that makes the API call on your behalf. Since the Edge Function runs on the server, browsers do not apply CORS restrictions to it.

• Calling external APIs (OpenAI, Stripe, Twilio) directly from React components in the browser
• Supabase Edge Functions returning CORS preflight failures due to missing headers
• External webhook endpoints (N8N, Make, Zapier) not configured to accept requests from your domain
• API keys exposed in frontend code — the API rejects browser requests for security reasons
• Wildcard (*) CORS headers not working because the request includes credentials

Error messages you might see

Before you start

• A Lovable project that shows CORS errors in the browser console
• The external API URL and any required API keys or tokens
• Access to Cloud tab → Edge Functions and Cloud tab → Secrets in your Lovable project

How to fix it

// BROKEN: calling external API directly from React
async function fetchData() {
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer sk-xxx', // API key exposed!
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ model: 'gpt-4', messages: [{ role: 'user', content: 'Hello' }] }),
  });
  return response.json();
}

// FIXED: call your own Edge Function proxy instead
async function fetchData() {
  const response = await fetch('/functions/v1/openai-proxy', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ messages: [{ role: 'user', content: 'Hello' }] }),
  });
  return response.json();
}

// Edge Function missing CORS handling — preflight fails
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
serve(async (req) => {
  const data = await req.json();
  // ... process request
  return new Response(JSON.stringify(result));
});

// Edge Function with proper CORS handling
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
const corsHeaders = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
};
serve(async (req) => {
  // Handle CORS preflight
  if (req.method === 'OPTIONS') {
    return new Response('ok', { headers: corsHeaders });
  }
  try {
    const { messages } = await req.json();
    const apiKey = Deno.env.get('OPENAI_API_KEY');
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${apiKey}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ model: 'gpt-4', messages }),
    });
    const data = await response.json();
    return new Response(JSON.stringify(data), { headers: { ...corsHeaders, 'Content-Type': 'application/json' } });
  } catch (error) {
    return new Response(JSON.stringify({ error: error.message }), {
      status: 500,
      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
    });
  }
});

// WRONG: API key hardcoded in the Edge Function
const apiKey = 'sk-abc123realkey';

// CORRECT: API key from Secrets, injected at runtime
const apiKey = Deno.env.get('OPENAI_API_KEY');
if (!apiKey) {
  return new Response(
    JSON.stringify({ error: 'API key not configured' }),
    { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
  );
}

Complete code example

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
2
3// CORS headers — required for browser requests
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9serve(async (req) => {
10  // Handle CORS preflight requests
11  if (req.method === 'OPTIONS') {
12    return new Response('ok', { headers: corsHeaders });
13  }
14
15  try {
16    const { endpoint, method, body } = await req.json();
17    const apiKey = Deno.env.get('EXTERNAL_API_KEY');
18
19    if (!apiKey) {
20      throw new Error('API key not configured in Secrets');
21    }
22
23    // Forward the request to the external API
24    const response = await fetch(endpoint, {
25      method: method || 'POST',
26      headers: {
27        'Authorization': `Bearer ${apiKey}`,
28        'Content-Type': 'application/json',
29      },
30      body: body ? JSON.stringify(body) : undefined,
31    });
32
33    const data = await response.json();
34
35    // Return the external API response to the frontend
36    return new Response(JSON.stringify(data), {
37      status: response.status,
38      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
39    });
40  } catch (error) {
41    return new Response(
42      JSON.stringify({ error: error.message }),
43      {
44        status: 500,
45        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
46      }
47    );
48  }
49});

Best practices to prevent this

• Never call external APIs directly from React components — always route through a Supabase Edge Function proxy
• Always handle OPTIONS preflight requests in Edge Functions by returning CORS headers with a 200 status
• Store all external API keys in Cloud tab → Secrets, never in source code or Edge Function files
• Use specific Access-Control-Allow-Origin values in production instead of wildcard (*) when possible
• Return proper error messages from Edge Functions — do not let errors silently fail, making debugging impossible
• Check the Network tab (not just Console) in browser dev tools to see the full CORS preflight request and response
• For APIs you control, add your Lovable domain to the CORS allowed origins list instead of using a proxy

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns