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
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 HelpFrequently Asked Questions
When does CORS apply?
Browser enforces CORS for client-side requests. Calls from backend/Edge Functions aren't restricted.
Can I use CORS proxy?
CORS proxy services exist but aren't recommended for production. Better to use Edge Function proxy under your control.