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):An impressive list, right?
In this syntax: The OFFSET clause specifies the number of rows to skip before starting to return rows from the query. The offsetrowcount can be a constant, variable, or parameter that is greater or equal to zero.; The FETCH clause specifies the number of rows to return after the OFFSET clause has been processed. The offsetrowcount can a constant, variable or scalar. By default, fetch requests make use of standard HTTP-caching. That is, it honors Expires, Cache-Control headers, sends If-Modified-Since, and so on. Native instruments komplete kontrol 1 9 3. Just like regular HTTP-requests do. The cache options allows to ignore HTTP-cache or fine-tune its usage: 'default' – fetch uses standard HTTP-cache rules and headers. Fetch 5.8.1, a minor update, is now available for download. This release restores two features, the Find command and the ability to change font sizes, that were present in Fetch 5.7.7 but were missing from Fetch 5.8. In addition, Fetch 5.8.1 fixes a number of crashes and other bugs. See the release notes for details.
We fully covered
method
, headers
and body
in the chapter Fetch.The
signal
option is covered in Fetch: Abort.Now let’s explore the rest of capabilities.
referrer, referrerPolicy
These options govern how
fetch
sets 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 referer, set an empty string:
To set another url within the current origin:
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
referrer
option that allows to set the exact Referer
value, referrerPolicy
tells the browser general rules for each request type.Possible values are described in the Referrer Policy specification:
'no-referrer-when-downgrade'
– the default value: fullReferer
is sent always, unless we send a request from HTTPS to HTTP (to less secure protocol).'no-referrer'
– never sendReferer
.'origin'
– only send the origin inReferer
, not the full page URL, e.g. onlyhttp://site.com
instead ofhttp://site.com/path
.'origin-when-cross-origin'
– send fullReferer
to the same origin, but only the origin part for cross-origin requests (as above).'same-origin'
– send fullReferer
to the same origin, but noReferer
for cross-origin requests.'strict-origin'
– send only origin, don’t sendReferer
for HTTPS→HTTP requests.'strict-origin-when-cross-origin'
– for same-origin send fullReferer
, for cross-origin send only origin, unless it’s HTTPS→HTTP request, then send nothing.'unsafe-url'
– always send full url inReferer
, even for HTTPS→HTTP requests.
Here’s a table with all combinations: Photoscape x pro 2 8 2 – photo editor.
Value | To same origin | To another origin | HTTPS→HTTP |
---|---|---|---|
'no-referrer' | - | - | - |
'no-referrer-when-downgrade' or ' (default) | full | full | - |
'origin' | origin | origin | origin |
'origin-when-cross-origin' | full | origin | origin |
'same-origin' | full | - | - |
'strict-origin' | origin | origin | - |
'strict-origin-when-cross-origin' | full | origin | - |
'unsafe-url' | full | full | full |
Let’s say we have an admin zone with URL structure that shouldn’t be known from outside of the site.
If we send a
fetch
, then by default it always sends the Referer
header with the full url of our page (except when we request from HTTPS to HTTP, then no Referer
).E.g.
Referer: https://javascript.info/admin/secret/paths
.If we’d like other websites know only the origin part, not URL-path, we can set the option:
We can put it to all
fetch
calls, maybe integrate into JavaScript library of our project that does all requests and uses fetch
inside.Its only difference compared to the default behavior is that for requests to another origin
fetch
sends only the origin part of the URL (e.g. https://javascript.info
, without path). For requests to our origin we still get the full Referer
(maybe useful for debugging purposes).Referrer policy, described in the specification, is not just for
fetch
, but more global.In particular, it’s possible to set the default policy for the whole page using
Referrer-Policy
HTTP header, or per-link, with <a>
.mode
The
mode
option is a safe-guard that prevents occasional cross-origin requests:'cors'
– the default, cross-origin requests are allowed, as described in Fetch: Cross-Origin Requests,'same-origin'
– cross-origin requests are forbidden,'no-cors'
– only simple cross-origin requests are allowed.
This option may be useful when the URL for
fetch
comes from a 3rd-party, and we want a “power off switch” to limit cross-origin capabilities.credentials
Fetch 500
The
credentials
option specifies whether fetch
should send cookies and HTTP-Authorization headers with the request.'same-origin'
– the default, don’t send for cross-origin requests,'include'
– always send, requiresAccept-Control-Allow-Credentials
from cross-origin server in order for JavaScript to access the response, that was covered in the chapter Fetch: Cross-Origin Requests,'omit'
– never send, even for same-origin requests.
cache
By default,
fetch
requests make use of standard HTTP-caching. That is, it honors Expires
, Cache-Control
headers, sends If-Modified-Since
, and so on. Just like regular HTTP-requests do.The
cache
options allows to ignore HTTP-cache or fine-tune its usage:'default'
–fetch
uses standard HTTP-cache rules and headers,'no-store'
– totally ignore HTTP-cache, this mode becomes the default if we set a headerIf-Modified-Since
,If-None-Match
,If-Unmodified-Since
,If-Match
, orIf-Range
,'reload'
– don’t take the result from HTTP-cache (if any), but populate cache with the response (if response headers allow),'no-cache'
– create a conditional request if there is a cached response, and a normal request otherwise. Populate HTTP-cache with the response,'force-cache'
– use a response from HTTP-cache, even if it’s stale. If there’s no response in HTTP-cache, make a regular HTTP-request, behave normally,'only-if-cached'
– use a response from HTTP-cache, even if it’s stale. If there’s no response in HTTP-cache, then error. Only works whenmode
is'same-origin'
.
redirect
Normally,
fetch
transparently follows HTTP-redirects, like 301, 302 etc.The
redirect
option allows to change that:'follow'
– the default, follow HTTP-redirects,'error'
– error in case of HTTP-redirect,'manual'
– don’t follow HTTP-redirect, butresponse.url
will be the new URL, andresponse.redirected
will betrue
, so that we can perform the redirect manually to the new URL (if needed).
integrity
Fetch 500 Error
The
integrity
option allows to check if the response matches the known-ahead checksum.As described in the specification, supported hash-functions are SHA-256, SHA-384, and SHA-512, there might be others depending on a browser.
For example, we’re downloading a file, and we know that it’s SHA-256 checksum is “abcdef” (a real checksum is longer, of course).
We can put it in the
integrity
option, like this:Then
fetch
will calculate SHA-256 on its own and compare it with our string. In case of a mismatch, an error is triggered.keepalive
The
keepalive
option indicates that the request may “outlive” the webpage that initiated it.For example, we gather statistics about how the current visitor uses our page (mouse clicks, page fragments he views), to analyze and improve user experience.
Fetch 5.8
When the visitor leaves our page – we’d like to save the data at our server.
We can use
window.onunload
event for that:Normally, when a document is unloaded, all associated network requests are aborted. But
keepalive
option tells the browser to perform the request in background, even after it leaves the page. So this option is essential for our request to succeed.Fetch 5k
It has a few limitations:
Fetch 518 Idaho Schedule Listings 2011
- We can’t send megabytes: the body limit for
keepalive
requests is 64kb.- If we need to gather a lot of statistics about the visit, we should send it out regularly in packets, so that there won’t be a lot left for the last
onunload
request. - This limit applies to all
keepalive
requests together. In other words, we can perform multiplekeepalive
requests in parallel, but the sum of their body lengths should not exceed 64kb.
- If we need to gather a lot of statistics about the visit, we should send it out regularly in packets, so that there won’t be a lot left for the last
- We can’t handle the server response if the document is unloaded. So in our example
fetch
will succeed due tokeepalive
, but subsequent functions won’t work.- In most cases, such as sending out statistics, it’s not a problem, as server just accepts the data and usually sends an empty response to such requests.