How to Prevent CORS Issues When Using External APIs in Lovable

Why proactive CORS prevention saves time compared to debugging CORS errors later

CORS errors are one of the most frequently reported issues in Lovable projects, yet they are entirely preventable with the right architecture. The key insight is that CORS only applies to browser-to-server requests. If your frontend only talks to your own server (Supabase Edge Functions), and your server talks to external APIs, the browser never makes a cross-origin request. Many developers discover CORS when they are deep into building a feature. They write a fetch call to the Stripe API or OpenAI, it works in their mental model, and then the browser blocks it. At that point, they have to refactor their code to add an Edge Function proxy — a more disruptive change than if they had used the proxy pattern from the beginning. Preventing CORS is not just about avoiding error messages. It is also about security. When you route API calls through Edge Functions, the API keys stay on the server. They are never included in the JavaScript bundle sent to browsers. This eliminates the risk of key exposure that comes with putting secrets in VITE_ environment variables or, worse, hardcoding them. The pattern is straightforward: for every external API your app needs, create a dedicated Edge Function. The function reads the API key from Secrets, calls the external API, and returns the response. Your React code only ever calls your own Edge Functions.

• Calling external APIs directly from React components instead of using Edge Function proxies
• Not planning the API architecture before building features — CORS discovered too late
• Storing API keys as VITE_ variables — still insecure even though it avoids hardcoding
• Using browser fetch for server-to-server API patterns (payment processing, AI completions)
• Forgetting to add CORS headers to Edge Functions themselves for the preflight response

Error messages you might see

Before you start

• A Lovable project where you plan to integrate external APIs
• A list of external APIs your app will use (Stripe, OpenAI, email services, etc.)
• Understanding that external API calls should be designed as Edge Functions from the start

How to fix it

// BAD PLAN: frontend calls external APIs directly
// React → Stripe API (CORS error)
// React → OpenAI API (CORS error)
// React → Resend API (CORS error)

// GOOD PLAN: frontend calls Edge Functions, Edge Functions call APIs
// React → Edge Function (stripe-checkout) → Stripe API
// React → Edge Function (openai-chat) → OpenAI API
// React → Edge Function (send-email) → Resend API

1// Keys stored in Cloud tab → Secrets:
2// STRIPE_SECRET_KEY = sk_live_...
3// OPENAI_API_KEY = sk-...
4// RESEND_API_KEY = re_...
5
6// Accessed in Edge Functions:
7const stripeKey = Deno.env.get('STRIPE_SECRET_KEY');
8const openaiKey = Deno.env.get('OPENAI_API_KEY');
9const resendKey = Deno.env.get('RESEND_API_KEY');

// No standard template — each function handles CORS differently
// Some miss OPTIONS handling, some forget CORS headers on errors

// Standard Edge Function template for all external API proxies
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',
};
function errorResponse(message: string, status = 400) {
  return new Response(
    JSON.stringify({ error: message }),
    { status, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
  );
}
serve(async (req) => {
  // Always handle preflight first
  if (req.method === 'OPTIONS') {
    return new Response('ok', { headers: corsHeaders });
  }
  try {
    const body = await req.json();
    const apiKey = Deno.env.get('YOUR_API_KEY');
    if (!apiKey) return errorResponse('API key not configured', 500);
    // Your external API call here
    const result = await callExternalApi(apiKey, body);
    return new Response(JSON.stringify(result), {
      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
    });
  } catch (error) {
    return errorResponse(error.message, 500);
  }
});

// Scattered fetch calls — some go through Edge Functions, some go direct
fetch('https://api.stripe.com/v1/charges'); // Direct — CORS error!
fetch('/functions/v1/openai-chat', { body }); // Through Edge Function — works

// Centralized API client — always routes through Edge Functions
import { supabase } from '@/integrations/supabase/client';
export const api = {
  stripe: {
    createCheckout: (items: CartItem[]) =>
      supabase.functions.invoke('stripe-checkout', { body: { items } }),
  },
  openai: {
    chat: (messages: Message[]) =>
      supabase.functions.invoke('openai-chat', { body: { messages } }),
  },
  email: {
    send: (to: string, subject: string, html: string) =>
      supabase.functions.invoke('send-email', { body: { to, subject, html } }),
  },
};

Complete code example

1import { supabase } from '@/integrations/supabase/client';
2
3/**
4 * Centralized API client that routes all external API calls
5 * through Supabase Edge Functions. This prevents CORS issues
6 * by design — the browser only talks to our own origin.
7 *
8 * Usage:
9 *   import { api } from '@/services/api';
10 *   const { data } = await api.invoke('function-name', payload);
11 */
12
13interface ApiResponse<T = unknown> {
14  data: T | null;
15  error: string | null;
16}
17
18async function invoke<T>(
19  functionName: string,
20  body: Record<string, unknown>
21): Promise<ApiResponse<T>> {
22  try {
23    const { data, error } = await supabase.functions.invoke(
24      functionName,
25      { body }
26    );
27
28    if (error) {
29      return { data: null, error: error.message };
30    }
31
32    return { data: data as T, error: null };
33  } catch (err) {
34    return {
35      data: null,
36      error: err instanceof Error ? err.message : 'Unknown error',
37    };
38  }
39}
40
41export const api = {
42  // Generic invoke for any Edge Function
43  invoke,
44
45  // Typed helpers for specific integrations
46  stripe: {
47    createCheckout: (items: unknown[]) =>
48      invoke('stripe-checkout', { items }),
49    createPortal: (customerId: string) =>
50      invoke('stripe-portal', { customerId }),
51  },
52
53  ai: {
54    chat: (messages: { role: string; content: string }[]) =>
55      invoke('openai-chat', { messages }),
56    summarize: (text: string) =>
57      invoke('openai-chat', {
58        messages: [{ role: 'user', content: `Summarize: ${text}` }],
59      }),
60  },
61
62  email: {
63    send: (to: string, subject: string, html: string) =>
64      invoke('send-email', { to, subject, html }),
65  },
66};

Best practices to prevent this

• Plan Edge Functions for every external API integration before writing any code — prevention is easier than refactoring
• Store all API keys in Cloud tab → Secrets without the VITE_ prefix before starting development
• Create a centralized API client that always routes through Edge Functions — make it structurally impossible to call external APIs directly
• Use a standard Edge Function template that handles CORS preflight, error responses, and secret retrieval consistently
• Use Lovable's Plan Mode to design your API architecture before implementing — plan the Edge Functions, their names, and their responsibilities
• Include CORS headers on error responses too — a 500 error without CORS headers produces a confusing CORS error in the browser instead of showing the actual error
• Test each Edge Function individually before connecting it to frontend components — use the Cloud tab → Logs to verify

Still stuck?

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

Related error patterns