CORS
Definition
CORS is the browser's permission system for cross-origin reads made by code. An origin is the scheme, host and port together, so https://notes.99helpers.site and https://app.example.com are different origins even if the same person owns both. When a script on one origin calls fetch or XMLHttpRequest against another, the browser looks at the response for an Access-Control-Allow-Origin header. If that header names the calling origin, or is the wildcard asterisk, the script gets the body; if it is missing, the script gets an error and the console prints a CORS message. The single most common confusion is worth stating plainly: CORS does not control who can fetch your file. It controls what a script running on another origin is allowed to read. Anyone can still open the URL directly, curl it, or point an image or script tag at it.
Why It Matters
Almost every CORS error is a page trying to load data it has every right to load. A dashboard published at one address fetches a JSON file published at another, and the numbers never appear — not because the file is private, but because the response carried no permission header. The fix is one header on the file being fetched, not a change to the page doing the fetching, which is why people spend hours editing the wrong side. It also matters in the other direction: setting Access-Control-Allow-Origin to asterisk on an endpoint that returns anything personal lets any page on the web read it on a visitor's behalf.
How It Works
A simple request — a GET with ordinary headers — is sent straight away, and the browser checks Access-Control-Allow-Origin on the response before releasing the body. Anything less simple triggers a preflight: before the real call, the browser sends an OPTIONS request to the same URL carrying Access-Control-Request-Method and Access-Control-Request-Headers, and the server must answer with Access-Control-Allow-Methods, Access-Control-Allow-Headers and, if cookies are involved, Access-Control-Allow-Credentials set to true. Preflight answers can be cached for the number of seconds given in Access-Control-Max-Age, commonly 86400. Note that the wildcard and Allow-Credentials cannot be combined; with credentials the server must echo the exact origin. Static hosts including 99helpers typically send Access-Control-Allow-Origin with a wildcard on public assets, which is what makes a hosted JSON file readable from anywhere.
Real-World Example
A designer publishes a price list as 'prices.json' at studio-data.99helpers.site and a calculator page on their own company domain. The calculator fetches the JSON and shows nothing; the console reports that no Access-Control-Allow-Origin header is present. Because the file is served from a static host that sends the wildcard on public assets, the actual culprit turns out to be a typo in the URL returning a 404 page with no CORS headers at all. Correcting the path fixes it in one edit, with no change to the calculator.
Common Mistakes
- ✕Treating CORS as access control — it is not a lock, since the file is still fetchable by curl, by a browser address bar and by any server
- ✕Adding CORS headers to the page making the request instead of the resource being requested — only the response matters
- ✕Sending Access-Control-Allow-Origin as a wildcard alongside credentials — browsers reject that combination outright
- ✕Forgetting that a custom header or a JSON content type turns a simple request into a preflight, so the OPTIONS call must be answered too
Related Terms
Same-Origin Policy
The browser rule that keeps code loaded from one origin from reading data belonging to another. It is the foundation the rest of web security is built on.
Content Security Policy
A response header that tells the browser which sources a page is allowed to load scripts, styles, images and frames from. Anything outside the policy is blocked before it runs.
Security Header
An HTTP response header that instructs the browser to enforce a restriction on a page — what it may load, who may frame it, how much of its URL leaks. The server states the rule; the browser applies it.
REST API
A way of exposing a service over HTTP where each thing you can act on has its own URL, and the HTTP method says what you are doing to it. GET reads, POST creates, PUT replaces, DELETE removes.
MIME Type
A MIME type, also called a media type or content type, is the short label a server sends to say what kind of data a response contains — text/html, image/png, application/pdf. The browser decides what to do with the bytes based on that label, not on the file name.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →