Fetch

https://fetch.spec.whatwg.org/
Admin
Fetch is a web standard that defines requests, responses, and the unified process of fetching...
Tokens:79,944
Snippets:552
Trust Score:9.8
Update:1 month ago
Show doc for...
Tokens:
Raw
### Header parsing example A: text/html; and A: x/x

Source: https://fetch.spec.whatwg.org/

Example of parsing multiple lines for the same header.

```text
A: text/html;"
A: x/x
```

--------------------------------

### Header parsing example A: x / x, A: , A: 1

Source: https://fetch.spec.whatwg.org/

Example of parsing multiple header lines with empty values.

```text
A: x / x
A: ,
A: 1
```

--------------------------------

### Header parsing example A: text/html;

Source: https://fetch.spec.whatwg.org/

Example of parsing a header with a semicolon.

```text
A: text/html;", x/x
```

--------------------------------

### Header parsing example A: x / x,,,1

Source: https://fetch.spec.whatwg.org/

Example of parsing headers with multiple commas.

```text
A: x / x,,,1
```

--------------------------------

### Access-Control-Expose-Headers configuration

Source: https://fetch.spec.whatwg.org/

Example response headers showing how to expose specific headers to the client.

```http
Content-Security-Policy: default-src 'self'
Strict-Transport-Security: max-age=31536000; includeSubdomains; preload
Access-Control-Expose-Headers: Content-Security-Policy
```

--------------------------------

### Header parsing example A: nosniff, B: sniff

Source: https://fetch.spec.whatwg.org/

Example of parsing multiple headers.

```text
A: nosniff
B: sniff
A:
```

--------------------------------

### Header parsing example A: nosniff

Source: https://fetch.spec.whatwg.org/

Example of parsing a single header value.

```text
A: nosniff,
```

--------------------------------

### Queue a deferred fetch with activation observation

Source: https://fetch.spec.whatwg.org/

This example queues a request to be fetched after 5 seconds and uses the returned FetchLaterResult to observe if the request was activated.

```javascript
const result = fetchLater("https://report.example.com", {
  method: "POST",
  body: JSON.stringify(myReport),
  headers: { "Content-Type": "application/json" },
  activateAfter: 5000
});

function check_if_fetched() {
  return result.activated;
}
```

--------------------------------

### Queue a deferred fetch request

Source: https://fetch.spec.whatwg.org/

This example demonstrates how to queue a POST request to be fetched when the document is terminated.

```javascript
fetchLater("https://report.example.com", {
  method: "POST",
  body: JSON.stringify(myReport),
  headers: { "Content-Type": "application/json" }
})
```

--------------------------------

### Header parsing example B: sniff

Source: https://fetch.spec.whatwg.org/

Example of parsing a header list where the target header is missing.

```text
B: sniff
```

--------------------------------

### Header parsing example A: "1,2", 3

Source: https://fetch.spec.whatwg.org/

Example of parsing quoted values containing commas.

```text
A: "1,2", 3
```

--------------------------------

### Use FetchLaterResult with AbortSignal

Source: https://fetch.spec.whatwg.org/

This example shows how to use an AbortSignal to manage deferred requests, allowing for the abortion of previous requests when new events are accumulated.

```javascript
let accumulated_events = [];
let previous_result = null;
const abort_signal = new AbortSignal();
function accumulate_event(event) {
  if (previous_result) {
    if (previous_result.activated) {
      // The request is already activated, we can start from scratch.
      accumulated_events = [];
    } else {
      // Abort this request, and start a new one with all the events.
      signal.abort();
    }
  }

  accumulated_events.push(event);
  result = fetchLater("https://report.example.com", {
    method: "POST",
    body: JSON.stringify(accumulated_events),
    headers: { "Content-Type": "application/json" },
    activateAfter: 5000,
    abort_signal
  });
}
```

--------------------------------

### Header parsing example A: x/x;test="hi",y/y

Source: https://fetch.spec.whatwg.org/

Example of parsing a header with quoted strings.

```text
A: x/x;test="hi",y/y
```

--------------------------------

### Header parsing example A: "1,2", D: 4, A: 3

Source: https://fetch.spec.whatwg.org/

Example of parsing headers with interleaved values and quotes.

```text
A: "1,2"
D: 4
A: 3
```

--------------------------------

### Fetch a resource as a Blob

Source: https://fetch.spec.whatwg.org/

Demonstrates fetching a file and processing it as a Blob.

```javascript
fetch("/music/pk/altes-kamuffel.flac")
  .then(res => res.blob()).then(playBlob)
```

--------------------------------

### fetch(input, init)

Source: https://fetch.spec.whatwg.org/

Initiates a fetch request and returns a Promise that resolves to a Response object.

```APIDOC
## fetch(input, init)

### Description
Initiates a fetch request and returns a Promise that resolves to a Response object.

### Method
fetch

### Parameters
- **input** (RequestInfo) - Required - A Request object or a URL string.
- **init** (RequestInit) - Optional - An object containing request options.

### Request Example
```js
const response = await fetch("https://example.com", {method: "GET"});
```

### Response
#### Success Response
- **response** (Promise<Response>) - A Promise that resolves to a Response object.

```

--------------------------------

### Initialize Headers object

Source: https://fetch.spec.whatwg.org/

Shows equivalent ways to initialize a Headers object using an object or an array of arrays.

```javascript
const meta = { "Content-Type": "text/xml", "Breaking-Bad": "<3" };
new Headers(meta);

// The above is equivalent to
const meta2 = [
  [ "Content-Type", "text/xml" ],
  [ "Breaking-Bad", "<3" ]
];
new Headers(meta2);
```

--------------------------------

### Header parsing example A: x/x;test="hi", C: bingo, A: y/y

Source: https://fetch.spec.whatwg.org/

Example of parsing headers with interleaved values.

```text
A: x/x;test="hi"
C: **bingo**
A: y/y
```

--------------------------------

### Examples of fetchLater calls that throw errors

Source: https://fetch.spec.whatwg.org/

These examples demonstrate scenarios where fetchLater will throw an error, such as using untrusted URLs, dynamic streams, or detached windows.

```javascript
// Only potentially trustworthy URLs are supported.
fetchLater("http://untrusted.example.com");

// The length of the deferred request has to be known when.
fetchLater("https://origin.example.com", {body: someDynamicStream});

// Deferred fetching only works on active windows.
const detachedWindow = iframe.contentWindow;
iframe.remove();
detachedWindow.fetchLater("https://origin.example.com");
```

--------------------------------

### fetch(input, init)

Source: https://fetch.spec.whatwg.org/

Method that initiates a fetch request and returns a Promise that resolves to a Response object. It accepts a RequestInfo input and optional RequestInit options.

```APIDOC
## fetch(input, init)

### Description
Method that initiates a fetch request and returns a Promise that resolves to a Response object. It accepts a RequestInfo input and optional RequestInit options.

### Method
METHOD

### Endpoint
fetch(input, init)

### Parameters
- **input** (RequestInfo) - Required - The resource to fetch.
- **init** (RequestInit) - Optional - Initialization options for the request.

### Response
Returns a Promise that resolves to a Response object.
```

--------------------------------

### fetchLater(input, init)

Source: https://fetch.spec.whatwg.org/

Schedules a fetch request to be sent later, returning a FetchLaterResult.

```APIDOC
## fetchLater(input, init)

### Description
Schedules a fetch request to be sent later, returning a FetchLaterResult.

### Method
fetchLater

### Parameters
- **input** (RequestInfo) - Required - A Request object or a URL string.
- **init** (DeferredRequestInit) - Optional - An object containing request options, including activateAfter.

### Request Example
```js
const result = fetchLater("https://example.com", {activateAfter: 1000});
```

### Response
#### Success Response
- **result** (FetchLaterResult) - An object with an `activated` boolean property.

```

--------------------------------

### Example of Content-Type CORS preflight vulnerability

Source: https://fetch.spec.whatwg.org/

This example demonstrates a request that would bypass CORS preflight if the MIME type extraction algorithm were too forgiving, potentially allowing a naïve server to misinterpret the request body.

```javascript
fetch("https://victim.example/naïve-endpoint", {
  method: "POST",
  headers: [
    ["Content-Type", "application/json"],
    ["Content-Type", "text/plain"]
  ],
  credentials: "include",
  body: JSON.stringify(exerciseForTheReader)
});
```

--------------------------------

### Ignore response body

Source: https://fetch.spec.whatwg.org/

Example of fetching a request without expecting a response, useful for fire-and-forget operations.

```text
Fetch a request whose URL is https://fire-and-forget.example.com/, method is POST, and client is this’s relevant settings object.
```
Tokens:
Raw