RequestInit

attributionReporting Optional Experimentell

Gibt an, dass Sie möchten, dass die Antwort der Anfrage eine JavaScript-basierte Zuordnungsquelle oder einen Zuordnungsauslöser registrieren kann. attributionReporting ist ein Objekt, das die folgenden Eigenschaften enthält:

eventSourceEligible

Ein Boolean. Wenn auf true gesetzt, ist die Antwort der Anfrage berechtigt, eine Zuordnungsquelle zu registrieren. Wenn auf false gesetzt, ist sie es nicht.

triggerEligible

Ein Boolean. Wenn auf true gesetzt, ist die Antwort der Anfrage berechtigt, einen Zuordnungsauslöser zu registrieren. Wenn auf false gesetzt, ist sie es nicht.

Weitere Details finden Sie in der Attribution Reporting API.

body Optional

Der Anfrageinhalt enthält Inhalte, die an den Server gesendet werden sollen, beispielsweise in einer POST- oder PUT-Anfrage. Er wird als Instanz eines der folgenden Typen angegeben:

• ein string
• ArrayBuffer
• Blob
• DataView
• File
• FormData
• TypedArray
• URLSearchParams
• ReadableStream

Weitere Details finden Sie unter Setting a body.

browsingTopics Optional Experimentell

Ein Boolean, der angibt, dass die ausgewählten Themen für den aktuellen Benutzer in einem Sec-Browsing-Topics-Header mit der zugehörigen Anfrage gesendet werden sollen.

Weitere Details finden Sie unter Using the Topics API.

cache Optional

Der für die Anfrage zu verwendende Cache-Modus. Dies kann einer der folgenden Werte sein:

default

Der Browser sucht in seinem HTTP-Cache nach einer Antwort, die zur Anfrage passt.

• Wenn es eine Übereinstimmung gibt und sie aktuell ist, wird sie aus dem Cache zurückgegeben.
• Wenn es eine Übereinstimmung gibt, aber sie veraltet ist, stellt der Browser eine bedingte Anfrage an den entfernten Server. Wenn der Server angibt, dass die Ressource nicht geändert wurde, wird sie aus dem Cache zurückgegeben. Andernfalls wird die Ressource vom Server heruntergeladen und der Cache aktualisiert.
• Wenn keine Übereinstimmung vorhanden ist, stellt der Browser eine normale Anfrage und aktualisiert den Cache mit der heruntergeladenen Ressource.

no-store

Der Browser ruft die Ressource vom entfernten Server ab, ohne vorher im Cache nachzusehen, und wird nicht den Cache mit der heruntergeladenen Ressource aktualisieren.

reload

Der Browser ruft die Ressource vom entfernten Server ab, ohne vorher im Cache nachzusehen, aber wird den Cache mit der heruntergeladenen Ressource aktualisieren.

no-cache

Der Browser sucht in seinem HTTP-Cache nach einer Antwort, die zur Anfrage passt.

• Wenn es eine Übereinstimmung gibt, aktuell oder veraltet, stellt der Browser eine bedingte Anfrage an den entfernten Server. Wenn der Server angibt, dass die Ressource nicht geändert wurde, wird sie aus dem Cache zurückgegeben. Andernfalls wird die Ressource vom Server heruntergeladen und der Cache aktualisiert.
• Wenn keine Übereinstimmung vorhanden ist, stellt der Browser eine normale Anfrage und aktualisiert den Cache mit der heruntergeladenen Ressource.

force-cache

Der Browser sucht in seinem HTTP-Cache nach einer Antwort, die zur Anfrage passt.

• Wenn es eine Übereinstimmung gibt, aktuell oder veraltet, wird sie aus dem Cache zurückgegeben.
• Wenn keine Übereinstimmung vorhanden ist, stellt der Browser eine normale Anfrage und aktualisiert den Cache mit der heruntergeladenen Ressource.

only-if-cached

Der Browser sucht in seinem HTTP-Cache nach einer Antwort, die zur Anfrage passt. Experimentell

• Wenn es eine Übereinstimmung gibt, aktuell oder veraltet, wird sie aus dem Cache zurückgegeben.
• Wenn keine Übereinstimmung vorhanden ist, wird ein Netzwerkfehler zurückgegeben.

Der Modus "only-if-cached" kann nur verwendet werden, wenn der mode der Anfrage "same-origin" ist. Zwischengespeicherte Weiterleitungen werden befolgt, wenn die redirect-Eigenschaft der Anfrage "follow" ist und die Weiterleitungen den "same-origin" Modus nicht verletzen.

credentials Optional

Kontrolliert, ob der Browser Anmeldeinformationen mit der Anfrage sendet und ob Set-Cookie-Antwortheader respektiert werden. Anmeldeinformationen sind Cookies, TLS-Clientzertifikate oder Authentifizierungsheader, die einen Benutzernamen und ein Passwort enthalten. Diese Option kann einer der folgenden Werte sein:

omit

Niemals Anmeldeinformationen in der Anfrage senden oder in der Antwort enthalten.

same-origin

Anmeldeinformationen nur für gleichartige Anfragen senden und einfügen.

include

Anmeldeinformationen immer einfügen, auch bei Anfragen an fremde Herkunft.

Das Einfügen von Anmeldeinformationen in fremde Anfragen kann eine Website anfällig für CSRF-Angriffe machen. Selbst wenn credentials auf include gesetzt ist, muss der Server auch ihrer Einbeziehung zustimmen, indem er Access-Control-Allow-Credentials in seiner Antwort einfügt. Zusätzlich muss der Server die Herkunft des Clients in dem Access-Control-Allow-Origin-Antwortheader explizit angeben (das heißt, * ist nicht erlaubt).

Weitere Details finden Sie unter Including credentials.

Standardmäßig same-origin.

headers Optional

Alle Header, die Sie Ihrer Anfrage hinzufügen möchten, enthalten in einem Headers-Objekt oder einem Objektliteral, dessen Schlüssel die Namen der Header und dessen Werte die Header-Werte sind.

Viele Header werden automatisch vom Browser gesetzt und können nicht durch ein Skript gesetzt werden: Diese werden Forbidden request headers genannt.

Wenn die mode-Option auf no-cors gesetzt ist, können Sie nur CORS-safelisted request headers setzen.

Weitere Details finden Sie unter Setting headers.

integrity Optional

Enthält den Wert für die Subresource-Integrität.

Dies wird überprüft, wenn die Ressource abgerufen wird, genauso wie es der Fall wäre, wenn das integrity-Attribut auf einem <Script>-Element gesetzt ist. Der Browser wird den Hash der abgerufenen Ressource mit dem angegebenen Algorithmus berechnen, und wenn das Ergebnis nicht dem angegebenen Wert entspricht, wird der Browser die fetch-Anfrage mit einem Netzwerkfehler ablehnen.

Das Format dieser Option ist <hash-algo>-<hash-source> wobei:

• <hash-algo> einer der folgenden Werte ist: sha256, sha384 oder sha512
• <hash-source> die Base64-Kodierung des Ergebnisses des Hashings der Ressource mit dem angegebenen Hash-Algorithmus ist.

Standardmäßig ein leerer string.

keepalive Optional

Ein Boolean. Wenn auf true gesetzt, wird der Browser die zugehörige Anfrage nicht abbrechen, wenn die Seite, die sie gestartet hat, entladen wird, bevor die Anfrage abgeschlossen ist. Dadurch kann eine fetch()-Anfrage Analysedaten am Ende einer Sitzung senden, selbst wenn der Benutzer die Seite verlässt oder schließt.

Dies hat einige Vorteile gegenüber der Verwendung von Navigator.sendBeacon() für denselben Zweck. Beispielsweise können Sie andere HTTP-Methoden als POST verwenden, Eigenschaften der Anfrage anpassen und auf die Serverantwort über die Erfüllung des fetch Promise zugreifen. Es ist auch in Service Workern verfügbar.

Die Körpergröße für keepalive-Anfragen ist auf 64 Kibibyte begrenzt.

Standardmäßig false.

method Optional

Die Anfragemethode.

Standardmäßig GET.

mode Optional

Legt das Cross-Origin-Verhalten für die Anfrage fest. Einer der folgenden Werte:

same-origin

Lässt keine Cross-Origin-Anfragen zu. Wenn eine same-origin-Anfrage an eine andere Herkunft gesendet wird, ist das Ergebnis ein Netzwerkfehler.

cors

Wenn die Anfrage Cross-Origin ist, wird das Cross-Origin Resource Sharing (CORS)-Mechanismus verwendet. Nur CORS-safelisted response headers sind in der Antwort sichtbar.

no-cors

Deaktiviert CORS für Cross-Origin-Anfragen. Diese Option beinhaltet die folgenden Einschränkungen:

• Die Methode darf nur HEAD, GET oder POST sein.
• Die Header dürfen nur CORS-safelisted request headers sein, mit der zusätzlichen Einschränkung, dass der Range-Header ebenfalls nicht erlaubt ist. Dies gilt auch für alle Header, die durch Service Worker hinzugefügt werden.
• Die Antwort ist undurchsichtig, was bedeutet, dass ihre Header und ihr Körper für JavaScript nicht verfügbar sind und ihr Statuscode immer 0 ist.

Die Hauptanwendung für no-cors ist für einen Service Worker: Obwohl die Antwort auf eine no-cors-Anfrage von JavaScript nicht gelesen werden kann, kann sie von einem Service Worker zwischengespeichert und dann als Antwort auf eine abgefangene fetch-Anfrage verwendet werden. Beachten Sie, dass Sie in dieser Situation nicht wissen, ob die Anfrage erfolgreich war oder nicht, daher sollten Sie eine Caching-Strategie verwenden, die es ermöglicht, dass die zwischengespeicherte Antwort aus dem Netzwerk aktualisiert wird (wie z. B. Cache-First mit Cache-Aktualisierung).

navigate

Wird nur bei HTML-Navigationen verwendet. Eine navigate-Anfrage wird nur beim Navigieren zwischen Dokumenten erstellt.

Weitere Details finden Sie unter Making cross-origin requests.

Standardmäßig cors.

priority Optional

Gibt die Priorität der fetch-Anfrage relativ zu anderen Anfragen desselben Typs an. Muss einer der folgenden Werte sein:

high

Eine fetch-Anfrage mit hoher Priorität im Vergleich zu anderen Anfragen desselben Typs.

low

Eine fetch-Anfrage mit niedriger Priorität im Vergleich zu anderen Anfragen desselben Typs.

auto

Keine Benutzerpräferenz für die fetch-Priorität. Sie wird verwendet, wenn kein Wert gesetzt ist oder ein ungültiger Wert gesetzt ist.

Standardmäßig auto.

redirect Optional

Bestimmt das Verhalten des Browsers, falls der Server mit einem Umleitungsstatus antwortet. Einer der folgenden Werte:

follow

Automatisch Weiterleitungen folgen.

error

Das Promise bei Rückgabe eines Umleitungsstatus mit einem Netzwerkfehler ablehnen.

manual

Eine Antwort mit fast allen gefilterten Feldern zurückgeben, um einem Service Worker zu ermöglichen, die Antwort zu speichern und später erneut abzuspielen.

Standardmäßig follow.

referrer Optional

Ein String, der angibt, welcher Wert für den Referer-Header der Anfrage verwendet werden soll. Einer der folgenden:

Eine gleichartige relative oder absolute URL

Setzt den Referer-Header auf den angegebenen Wert. Relative URLs werden relativ zur URL der Seite, die die Anfrage gemacht hat, aufgelöst.

Ein leerer string

Den Referer-Header weglassen.

about:client

Setzt den Referer-Header auf den Standardwert für den Kontext der Anfrage (z. B. die URL der Seite, die die Anfrage gemacht hat).

Standardmäßig about:client.

referrerPolicy Optional

Ein String, der eine Richtlinie für den Referer-Header festlegt. Die Syntax und Semantik dieser Option sind genau die gleichen wie für den Referrer-Policy-Header.

signal Optional

Ein AbortSignal. Wenn diese Option gesetzt ist, kann die Anfrage abgebrochen werden, indem abort() auf dem entsprechenden AbortController aufgerufen wird.

In diesem Beispiel übergeben wir die method, body, und headers-Optionen direkt in den Aufruf der fetch()-Methode:

async function post() {
  const response = await fetch("https://example.org/post", {
    method: "POST",
    body: JSON.stringify({ username: "example" }),
    headers: {
      "Content-Type": "application/json",
    },
  });

  console.log(response.status);
}

In diesem Beispiel erstellen wir eine Request, indem wir denselben Satz von Optionen in seinen Konstruktor übergeben und die Anfrage dann an fetch() übergeben:

async function post() {
  const request = new Request("https://example.org/post", {
    method: "POST",
    body: JSON.stringify({ username: "example" }),
    headers: {
      "Content-Type": "application/json",
    },
  });

  const response = await fetch(request);

  console.log(response.status);
}

In diesem Beispiel erstellen wir eine Request, indem wir die method, headers, und body-Optionen in seinen Konstruktor übergeben. Wir übergeben dann die Anfrage an fetch() zusammen mit body und referrer-Optionen:

async function post() {
  const request = new Request("https://example.org/post", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ username: "example1" }),
  });

  const response = await fetch(request, {
    body: JSON.stringify({ username: "example2" }),
    referrer: "",
  });

  console.log(response.status);
}

In diesem Fall wird die Anfrage mit den folgenden Optionen gesendet:

• method: "POST"
• headers: {"Content-Type": "application/json"}
• body: '{"username":"example2"}'
• referrer: ""

• Using Fetch
• ServiceWorker API
• HTTP-Zugriffskontrolle (CORS)
• HTTP