Web API: Access to fetch has been blocked by CORS policy: No Access-Control-Allow-Origin header is present
Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Immediate Remediation
typescript
// Next.js API Route (src/app/api/.../route.ts)
export async function OPTIONS() {
return new Response(null, {
status: 204,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
},
});
}Root Cause Analysis
Browser security model blocked cross-origin JavaScript execution because the destination API did not return valid CORS response headers to preflight OPTIONS requests.
Verification & Guardrails
- For production APIs, restrict Access-Control-Allow-Origin to your exact domain instead of wildcard "*".
- Always respond with HTTP 204 or 200 to preflight OPTIONS requests.
Have a custom or uncategorized crash?
Run your trace through our in-memory client privacy sandbox for instant SRE remediation.