Understanding CORS: Cross-Origin Resource Sharing Explained

Few browser errors frustrate developers more than the dreaded CORS error. “No ‘Access-Control-Allow-Origin’ header is present” has blocked countless API integrations. But CORS exists for a very good reason — it protects users from malicious scripts accessing their data on other sites. Understanding how it works will save you hours of debugging.

The Same-Origin Policy

The same-origin policy is a browser security model that prevents JavaScript on one origin from reading responses from a different origin. An origin is defined by the combination of protocol, hostname, and port. https://app.example.com and https://api.example.com are different origins despite sharing the same domain, because the subdomain differs.

What CORS Does

CORS is a mechanism that allows servers to explicitly declare which origins are permitted to access their resources. It works through HTTP headers. When a browser detects a cross-origin request, it either sends it directly (for simple requests) or sends a preflight OPTIONS request first.

Simple Requests vs Preflight

Simple requests (GET, POST with certain content types) are sent directly, and the browser checks the response headers for CORS permissions. Preflight requests are triggered for more complex requests — those using methods like PUT or DELETE, or headers like Authorization or custom headers. The browser sends an OPTIONS request first; only if the server approves does the actual request proceed.

Key CORS Response Headers

• Access-Control-Allow-Origin — Which origins are allowed (* or a specific origin)
• Access-Control-Allow-Methods — Allowed HTTP methods
• Access-Control-Allow-Headers — Allowed request headers
• Access-Control-Allow-Credentials — Whether cookies can be included
• Access-Control-Max-Age — How long to cache the preflight response

Credentials and Cookies

If you need to include cookies or Authorization headers in cross-origin requests, both sides must opt in. The request must set credentials: 'include' (fetch) or withCredentials: true (XHR), and the server must respond with Access-Control-Allow-Credentials: true and a specific origin (not *) in Access-Control-Allow-Origin.

Fixing CORS Errors

CORS is enforced by the browser, not the server. The server simply sets headers — the browser decides whether to allow the response through. Configuring CORS correctly on the server is the solution; browser extensions or proxies are workarounds only suitable for development. Never set Access-Control-Allow-Origin: * on an endpoint that handles authenticated requests.

Inspect your API headers. Use the HTTP Header Checker on devutilitypro.com to verify that your CORS headers are configured correctly before deploying.