← Errors
A CORS (Cross-Origin Resource Sharing) error occurs when a browser blocks a fetch or XMLHttpRequest to a different origin because the server's response does not include the required Access-Control-Allow-Origin header. This is a browser security feature, not a network failure.
Why it happens
- •The API server does not include CORS headers in its responses.
- •The server includes CORS headers but excludes the requesting origin.
- •A preflight OPTIONS request is not handled by the server.
- •Credentials (cookies, auth headers) are sent but the server does not allow credentialed requests.
Examples
JavaScript
Code that triggers the error
fetch("https://api.other-domain.com/data")
.then(res => res.json())
.then(console.log);Error output
Access to fetch at 'https://api.other-domain.com/data' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
How to fix it
Configure the API server to return the correct CORS headers. For development, use a proxy (Next.js rewrites, Vite proxy, etc.) to avoid cross-origin requests. Never use browser extensions that disable CORS as a production solution.
Fixed code
// The fix is on the SERVER, not the client.
// The API must return the header: Access-Control-Allow-Origin: *
// or: Access-Control-Allow-Origin: https://myapp.com
// Client-side workaround: proxy through your own backend
fetch("/api/proxy/data").then(res => res.json()).then(console.log);Related errors
Ready to practice your English at work?
Lingua-e has interactive exercises built around real developer conversations: standups, code reviews, retrospectives, and more. Practice until it comes naturally.
Try Lingua-e for free