Browser blocks cross-origin HTTP request missing proper CORS headers.
Cross-Origin Resource Sharing (CORS) is a browser security mechanism that restricts HTTP requests made from scripts running in a web browser to a different origin (domain, protocol, or port) than the one serving the current web page.
Occurs when calling a backend API from client-side JavaScript (`fetch`/`axios`) where the API server does not send the required `Access-Control-Allow-Origin` response header.
1// Client running at http://localhost:30002fetch("https://api.external-service.com/data")3 .then(res => res.json())4 .then(data => console.log(data));5// Console: Access to fetch at 'https://api.external-service.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy1// Express server fix (Backend):2// const cors = require('cors');3// app.use(cors({ origin: 'http://localhost:3000' }));4 5// OR Proxy via Next.js API Route (Server-side proxy bypasses browser CORS):6// app/api/data/route.js7export async function GET() {8 const res = await fetch("https://api.external-service.com/data");9 const data = await res.json();10 return Response.json(data);11}Simulate standard system builds to trigger compiler trace records and track memory crashes locally.
The browser sends an HTTP request or preflight `OPTIONS` check to `api.external-service.com`. Because the backend server didn't include `Access-Control-Allow-Origin: *` or `Access-Control-Allow-Origin: http://localhost:3000`, the browser rejects the response for security reasons.