JavaScript

CORS Error: What It Means and How to Fix It

Error reference

CORS Error

Language

JavaScript

Severity

High

When it happens

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.

Potential fixes

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.

Deep dive

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.

Potential fixes

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.

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.

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);

Practice in English

How would you explain a CORS Error to a fellow dev? Choose the right phrase:

"I hit an error...

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