Browser - Fetching Resources (Request/Response)



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?

Processing Model

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:


A web site (HTML, Javascript or CSS) is able to receive data resources (such as HTML, XML, or JSON documents) from:


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.






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),
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


mocking library such as Mswjs

Documentation / Reference

Discover More
A web resource is the data of the web

This articles shows what a web resource is, how to access it and how it's defined. Web resources is also known as web content. The most known web resource is an html page with its CSS and Javascript but...
Cors Flowchart
Browser - Cross Origin Resource Sharing (CORS)

Cross-origin resource sharing (CORS) is a mechanism that: * allows a HTTP server * to control the cross-origin requests executed by a browser. In short, a HTTP server may allow or not to receive...
Browser - Cross-Origin Read Blocking (CORB)

Cross-Origin Read Blocking (CORB) is a security feature that prevents the contents of a resource from ever entering the memory of the renderer process memory based on its MIME type. The main motivation...
Browser - Custom cache

If the default HTTP browser cache mechanism is not sufficient, you may implement your own cache system on top of fetching library with service worker.
Chrome Devtool Xhr Fetch Request
Browser - Web API - Fetch function

The fetch function is part of the web api function and is a AJAX call. It's one of the possibilities to fetch a resource. XMLHttpRequest (XHR) The fetch function returns a promise as response. The Fetch...
Chrome Devtool Xhr Fetch Request
Browser - XMLHttpRequest (XHR) API

The XMLHttpRequest is a web api function that performs an resource fetch with an Aysnchronous HTTP request XMLHttpRequestAPIAJAX programmingfetch API The status of an XHR request. Value Constant...
Firefox Browser Cache
Browser Cache - Management and usage

How to clear and manage the browser cache.
Card Puncher Data Processing
Consumer Analytics - Event Collector

A collector collects event send by a tracker The event and data send are describe in a measurement protocol Data aggregation refers to techniques for gathering individual data records (for example...
DOM - Document Loaded - onload event

The load event is an event that is fired / emitted on: an HTML element that fetch resources on the browser window when the page has finish loading. This event is a timing page load event To...
Html Script Async Vs Defer
HTML - Defer attribute

defer is an boolean attribute of script element that indicates to the user agent (browser) that it should execute the script: after the DOM has been created (the HTML document read entirely and has...

Share this page:
Follow us:
Task Runner