HTTP has no secrets
A request is a method, a path, some headers and maybe a body. Once you have read one in the raw, the whole protocol stops being a black box.
GET asks for something and should change nothing. POST sends something and is allowed to change the world. PUT, PATCH and DELETE are conventions on top of the same envelope. The reason the distinction matters is not etiquette: browsers, proxies and caches treat GET differently from everything else. They will retry it, prefetch it, and store it without asking you. A GET that deletes a record will eventually be deleted twice by a link prefetcher, and the bug report will make no sense.
Status codes come in families and the family is most of the message. 2xx worked, 3xx go somewhere else, 4xx you asked wrong, 5xx the server broke. Two are useful to know precisely. 304 Not Modified means your cached copy is still good and no body is coming, it is the cheapest useful response on the web. And 404 versus 410 is the difference between "not here" and "never coming back", which is a promise search engines actually act on.
Headers are where the interesting behaviour lives, and none of them appear in your source code, which is exactly why beginners never think to look. Content-Type decides how the bytes are interpreted, and getting it wrong is why a page sometimes renders as plain text. Content-Encoding decides whether you shipped 300KB or 60KB of the same file. Cache-Control decides whether the second visit costs anything at all.
Play with the exchange below until the numbers stop surprising you. Turn on gzip and watch Content-Length fall by roughly eighty per cent, that is not a tuning tweak, that is four fifths of your transfer. Turn on If-None-Match and watch the response become a few hundred bytes with no body, because the server has confirmed nothing changed. Switch the method to HEAD and watch the body vanish while the headers stay, which is how monitoring tools check a site is alive without downloading it.
The whole protocol, both directions
200 OKHover or tab through any line in either pane to find out what it does. Then change the request and watch which lines in the response appear, disappear, or change their number.
304 Not Modified : Nothing was sent. Your copy is still correct. Headers only, no body, a few hundred bytes instead of fifty thousand, and the whole reason ETags exist.
The reason to read these raw rather than through a library is that every abstraction you will use for the rest of your career, fetch, axios, a framework data loader, an API client someone generated for you, is putting exactly these bytes on the wire. When one of them behaves strangely, the debugging move is always the same: look at the request and the response. When something behaves strangely, start with the request and response before debugging the abstraction on top.
Worth reading
- MDN: HTTP ↗, The reference you will come back to for years. Bookmark the headers and status pages specifically.
- MDN: HTTP response status codes ↗, Every code, with what it actually means rather than what people assume.
You should now be able to
- Read a raw request and response by eye
- Explain what a status code in each family means
- Name three headers that change what the browser does
- Predict the byte cost of a request before you make it
Loading…