Fetch API

So far, we know quite a bit about fetch.

Let’s see the rest of API, to cover all its abilities.

Please note: most of these options are used rarely. You may skip this chapter and still use fetch well.

Still, it’s good to know what fetch can do, so if the need arises, you can return and read the details.

Here’s the full list of all possible fetch options with their default values (alternatives in comments):

          let promise = fetch(url, {
  method: "GET", // POST, PUT, DELETE, etc.
  headers: {
    // the content type header value is usually auto-set
    // depending on the request body
    "Content-Type": "text/plain;charset=UTF-8"
  },
  body: undefined, // string, FormData, Blob, BufferSource, or URLSearchParams
  referrer: "about:client", // or "" to send no Referer header,
  // or an url from the current origin
  referrerPolicy: "strict-origin-when-cross-origin", // no-referrer-when-downgrade, no-referrer, origin, same-origin...
  mode: "cors", // same-origin, no-cors
  credentials: "same-origin", // omit, include
  cache: "default", // no-store, reload, no-cache, force-cache, or only-if-cached
  redirect: "follow", // manual, error
  integrity: "", // a hash, like "sha256-abcdef1234567890"
  keepalive: false, // true
  signal: undefined, // AbortController to abort request
  window: window // null
});
        

An impressive list, right?

We fully covered method, headers and body in the chapter Fetch.

The signal option is covered in Fetch: Abort.

Now let’s explore the remaining capabilities.

referrer, referrerPolicy

These options govern how fetch sets the HTTP Referer header.

Usually that header is set automatically and contains the url of the page that made the request. In most scenarios, it’s not important at all, sometimes, for security purposes, it makes sense to remove or shorten it.

The referrer option allows to set any Referer (within the current origin) or remove it.

To send no referrer, set an empty string:

          fetch('/page', {
  referrer: "" // no Referer header
});
        

To set another url within the current origin:

          fetch('/page', {
  // assuming we're on https://javascript.info
  // we can set any Referer header, but only within the current origin
  referrer: "https://javascript.info/anotherpage"
});
        

The referrerPolicy option sets general rules for Referer.

Requests are split into 3 types:

Request to the same origin.
Request to another origin.
Request from HTTPS to HTTP (from safe to unsafe protocol).

Unlike the referrer option that allows to set the exact Referer value, referrerPolicy tells the browser general rules for each request type.