CORS

An HTTP-header based mechanism that allows a server to indicate any origins other than its own from which a browser should permit loading resources.

Internet4 min readConcept 18 of 35

What it is

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.

It acts as a controlled, server-approved relaxation of the browser's restrictive Same-Origin Policy (SOP).

Why it matters

Modern web applications frequently fetch resources-such as data from REST APIs, web fonts, or images-that reside on different domains than the one serving the front-end (e.g., frontend.com requesting data from api.backend.com).

Without CORS, the browser's Same-Origin Policy automatically blocks these cross-origin read requests to prevent malicious scripts from accessing sensitive data. Understanding CORS is essential to successfully connecting a front-end to third-party APIs or separated back-end services.

How it works

When a front-end makes a cross-origin request, the browser automatically attaches an Origin HTTP header indicating where the request is coming from.

The server inspects this header and, if it wants to allow the request, responds with an Access-Control-Allow-Origin header (containing the allowed origin, or * for any origin).

The browser sees this header. If it matches, the browser allows the front-end JavaScript to read the response. If not, the browser throws a CORS error.

Try it

Play with the **Nightclub Door Simulator**. Toggle the server's CORS settings on and off and watch how the browser's bouncer reacts to incoming data packets!

Nightclub Door (CORS Simulator)

Backend Server (The Manager)

Enable CORSAccess-Control-Allow-Origin: *

Browser

SOP
FRONTEND
CORS ERROR!
200 OK

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What is the primary purpose of CORS?
  2. 2You encounter a CORS error when your front-end tries to fetch data from an API. How should you generally fix this?

Remember this

  • CORS is a controlled relaxation of the Same-Origin Policy.
  • It relies on the server sending Access-Control-Allow-Origin headers.
  • CORS errors are enforced by the browser, but must be fixed on the server.

Done with this concept?

Mark it complete to track your progress. No login needed.