Fetch API
Definition
fetch(url) starts an HTTP request and returns a promise. When the response headers arrive the promise resolves to a Response object carrying the status code, the headers and a body you have not read yet — you read it separately with response.json() or response.text(), each of which returns another promise. A second argument sets the method, headers and body, so fetch(url, { method: 'POST', body: JSON.stringify(data) }) sends a POST. One detail trips people up constantly: fetch rejects only on a network failure, so a 404 or a 500 resolves perfectly happily and you have to check response.ok yourself. A request to a different origin is governed by the same-origin policy and only succeeds if the other server sends CORS headers back.
Why It Matters
On a static site fetch is usually the only thing between a page and its data, so when it fails the page is empty and says nothing about why. The three failures look different in one place only, the Network panel: a red CORS line means the request went out and the browser threw the reply away, a 404 means the path is wrong, and a request stuck pending usually means the wrong host or protocol. Checking response.ok costs one line and turns a blank page into a message you can act on. Skip it and a 404 error page gets handed to the JSON parser, which throws about an unexpected token and sends you looking in entirely the wrong file.
How It Works
The browser sends the request with the method and headers you gave it, and the promise settles as soon as the response head is back. You then read the body once — a Response body is a stream and can be consumed a single time, so calling response.json() twice throws. For a cross-origin request the browser looks for Access-Control-Allow-Origin in the reply; if that header is missing or does not match your page, the script is blocked from seeing the body even though the server answered normally. Anything beyond a simple GET triggers a preflight OPTIONS request first, which the other server also has to answer. Relative URLs resolve against the page, so fetch('data/prices.json') from a page at /reports/ asks for /reports/data/prices.json.
Real-World Example
A pricing table generated by an AI tool is uploaded to 99helpers as a folder and served at rate-card.99helpers.site, and the table renders empty. The Network panel shows a 404 on prices.json: the script asks for /data/prices.json with a leading slash, while the file was uploaded beside the HTML rather than in a data folder. Changing the call to prices.json fixes it. Had that row shown a 200 with the table still empty, the problem would have been the opposite one — the data arrived and the code reading it is wrong.
Common Mistakes
- ✕Treating a resolved fetch as a success — a 404 and a 500 both resolve, so nothing looks wrong until the parser chokes on an error page
- ✕Calling a third-party API straight from the browser with a secret key in the header — anyone who opens the Network panel can read it
- ✕Assuming CORS is something you fix in your own page — the header has to come from the server you are calling, not from you
Related Terms
Console Error
A console error is a message the browser writes when something on the page fails — a script throwing, a file that would not load, a request the browser refused. It is the first place to look when a page misbehaves.
Developer Tools
Developer tools are the inspection panels built into every desktop browser, opened with F12 or by right-clicking and choosing Inspect. They show the live page, its scripts, its network requests and its errors.
Event Listener
An event listener is a function attached to an element so that it runs when something happens to it — a click, a keypress, a form submit. It is how a static page becomes interactive.
CORS
Cross-Origin Resource Sharing is a set of HTTP headers that lets a server say which other origins are allowed to read its responses from JavaScript. Without those headers the browser fetches the file but refuses to hand the contents to the calling script.
JSON File
JSON is a text format for structured data, built from objects, arrays, strings, numbers, true, false and null. It is the usual way one program hands data to another over HTTP, and the usual way a static page loads data it did not ship with.
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 →