Browser - Fetching Resources (Request/Response)

About

This article is about fetching (http request/response) in the browser.

User agents can implement a variety of transfer protocols to fetch resources such as:

When the browser is rendering an HTML page, it encounters HTML elements that are executing fetching command (such as img that fetch an image). More … see What are the HTML elements that fetch resources?

When a user agent is to fetch a resource or URL:

optionally from an origin,
optionally using a specific referrer source as an override referrer source,
and optionally with any of a synchronous flag, a manual redirect flag, a force same-origin flag, and a block cookies flag,

it must follow this processing model.

A web site (HTML, Javascript or CSS) can fetch two types of resources from a server:

its own origin
or from other origins with permissive CORS headers such as Access-Control-Allow-Origin: *.

Media resources such as images, JavaScript, CSS, or fonts can be included from any origin, even without permissive CORS headers.

Cross-Origin Read Blocking (CORB) prevents the fetch of a cross-origin data resource.

See:

cors enabled fetch
background-fetch - Background Fetch lets you handle large downloads, even if the browser closes.

The origin request header indicates where a fetch originates from.

To give the possibility to abort a fetch, you need to use a AbortController.

Library adds:

Library	Platform	Framework Module	Feature
Axios	Browser / Node	Standalone	Caching via plugin, cancelation (inspired by ng http)
Angular http		Angular
superagent	Browser / Node	Standalone	Plugin based: cache, http mock, rest api mock, prefix (for dev),
frisbee
Swr React Hook (stale-while-revalidate)		React	stale-while-revalidate with a HTTP cache invalidation strategy popularized by RFC 5861 - SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again. Next Doc