Lovable
api
Third-Party API Calls Blocked by CORS
Calling third-party APIs from React app fails with CORS error. 'Access-Control-Allow-Origin' header missing. Works in backend but not client-side. Browser blocks cross-origin request.
CORS restrictions prevent client-side code from calling arbitrary APIs unless the API explicitly allows it. Solution requires using backend proxy or Edge Functions.
Error Messages You Might See
Access-Control-Allow-Origin header is missing
CORS policy blocked request
Preflight request failed
No 'Access-Control-Allow-Credentials' header
Common Causes
- Third-party API doesn't support CORS or doesn't include your domain
- Calling API directly from React instead of through backend
- Missing credentials in CORS request setup
- Preflight OPTIONS request fails
- API uses Authorization header without CORS config
How to Fix It
Route through Supabase Edge Function as proxy:
// Frontend
const response = await fetch('/functions/v1/proxy-api', {
method: 'POST',
body: JSON.stringify({ url: 'https://api.example.com/data' })
});
// Edge Function
export default async (req) => {
const { url } = await req.json();
const response = await fetch(url);
return response;
}Real developers can help you.
You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.
Get Help