Frontend & browser·topic 8 of 13

The network from the browser

The browser is not a HTTP client you control. It has its own rules about what you may request, what you may read back and what it will quietly cache, and those rules are the source of most requests that work in curl and fail in the tab.

Read in order · tick what you already know

01
the request counted as cross-origin because the port was different, even though the hostname matched.
Origin
02
the script could send the request but was not allowed to read what came back.
Same-origin policy
03
the request worked in curl and failed in the browser with a message about an Access-Control header.
CORS
04
the cross-origin POST went straight out with no preflight, because it used a form content type.
Simple request
05
the network panel shows an OPTIONS request before your PUT, and the PUT never happened because it failed.
Preflight request
06
the cookie was not sent with the cross-origin fetch until you passed `credentials: 'include'`.
Credentialed request
07
the fetch resolved successfully but the status was 0 and the body was empty.
Opaque response
08
you deployed a fix and the browser served the old file anyway, from its own disk cache.
Cache-Control
09
the browser asked whether its copy was still current and got back a 304 with no body at all.
Conditional request
10
the bundle is 800 kilobytes on disk and 190 over the wire, which is the number that matters.
Response compression
11
you stopped concatenating every file into one, because the connection now carries dozens of requests at once.
HTTP multiplexing
12
you looked at the timing bars and saw one request that could not start until three others had finished.
Network waterfall
13
the request returned a 500 and your `.catch` never ran, because the promise resolved just fine.
fetch
14
you sent the analytics event on page unload and it actually arrived, instead of being cancelled.
Beacon
15
the page got half a second slower and nobody on the team changed any code that week.
Third-party script