RequestInit

attributionReporting Optional Experimentell

Gibt an, dass die Antwort der Anfrage in der Lage sein soll, eine JavaScript-basierte Attributionsquelle oder einen Attribution Trigger zu registrieren. attributionReporting ist ein Objekt, das die folgenden Eigenschaften enthält:

eventSourceEligible

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

triggerEligible

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

Weitere Details finden Sie in der Attribution Reporting API.

body Optional

Der Anfrage-Körper enthält Inhalte, die an den Server gesendet werden sollen, beispielsweise in einer POST oder PUT-Anfrage. Es 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 für den aktuellen Benutzer ausgewählten Themen 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 Cache-Modus, den Sie für die Anfrage verwenden möchten. 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, sie aber veraltet ist, wird der Browser eine bedingte Anfrage an den entfernten Server stellen. Wenn der Server angibt, dass sich die Ressource nicht verändert hat, wird sie aus dem Cache zurückgegeben. Andernfalls wird die Ressource vom Server heruntergeladen und der Cache wird aktualisiert.
• Wenn es keine Übereinstimmung gibt, stellt der Browser eine normale Anfrage und aktualisiert den Cache mit der heruntergeladenen Ressource.

no-store

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

reload

Der Browser holt die Ressource vom entfernten Server, ohne zuerst im Cache nachzusehen, wird aber 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, wird der Browser eine bedingte Anfrage an den entfernten Server stellen. Wenn der Server angibt, dass sich die Ressource nicht verändert hat, wird sie aus dem Cache zurückgegeben. Andernfalls wird die Ressource vom Server heruntergeladen und der Cache wird aktualisiert.
• Wenn es keine Übereinstimmung gibt, 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 es keine Übereinstimmung gibt, 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 es keine Übereinstimmung gibt, wird ein Netzwerkfehler zurückgegeben.

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

credentials Optional

Bestimmt, ob der Browser Anmeldeinformationen mit der Anfrage sendet und ob Set-Cookie-Antwortheader beachtet werden. Anmeldeinformationen sind Cookies, TLS-Client-Zertifikate 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 Anmeldeinformationen in die Antwort aufnehmen.

same-origin

Nur Anmeldeinformationen für gleichoriginierte Anfragen senden und aufnehmen.

include

Anmeldeinformationen immer einbeziehen, auch für Anfragen von fremden Ursprüngen.

Das Einbeziehen von Anmeldeinformationen in Anfragen von fremden Ursprüngen 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 seine Antwort einschließt. Darüber hinaus muss der Server in dieser Situation ausdrücklich den Ursprung des Clients im Access-Control-Allow-Origin-Antwortheader angeben (das heißt, * ist nicht erlaubt).

Weitere Details finden Sie unter Including credentials.

Standardwert ist 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 deren Werte die Headerwerte sind.

Viele Header werden vom Browser automatisch gesetzt und können nicht durch ein Skript gesetzt werden: Diese werden als verbotene Anfrageheader bezeichnet.

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

Weitere Details finden Sie unter Setting headers.

integrity Optional

Enthält den Subresource-Integrität Wert der Anfrage.

Dieser wird überprüft, wenn die Ressource abgerufen wird, genauso wie wenn das integrity-Attribut auf einem <script>-Element gesetzt ist. Der Browser berechnet den Hash der abgerufenen Ressource mit dem angegebenen Algorithmus und lehnt die fetch-Anfrage mit einem Netzwerkfehler ab, falls das Ergebnis nicht mit dem angegebenen Wert übereinstimmt.

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 der Ressource-Hashing mit dem angegebenen Hash-Algorithmus ist.

Standardwert ist 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. Dies ermöglicht es einer fetch()-Anfrage, Analysen am Ende einer Sitzung zu senden, auch 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. Zum Beispiel können Sie andere HTTP-Methoden als POST verwenden, Anfrageeigenschaften anpassen und auf die Serverantwort über die Fetch-Promise-Erfüllung zugreifen. Es ist auch in Service Workern verfügbar.

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

Standardwert ist false.

method Optional

Die Anfragemethode.

Standardwert ist GET.

mode Optional

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

same-origin

Erlaubt keine Cross-Origin-Anfragen. Wenn eine same-origin-Anfrage an einen anderen Ursprung gesendet wird, ist das Ergebnis ein Netzwerkfehler.

cors

Wenn die Anfrage Cross-Origin ist, wird der Cross-Origin Resource Sharing (CORS)-Mechanismus verwendet. Nur CORS-safelisted-Antwortheader werden in der Antwort offengelegt.

no-cors

Deaktiviert CORS für Cross-Origin-Anfragen. Diese Option bringt folgende Einschränkungen mit sich:

• Die Methode darf nur HEAD, GET oder POST sein.
• Die Header dürfen nur CORS-safelisted-Anfrageheader sein, mit der zusätzlichen Einschränkung, dass der Range-Header ebenfalls nicht erlaubt ist. Dies gilt auch für alle von Service Workern hinzugefügten Header.
• Die Antwort ist opaque, was bedeutet, dass ihre Header und der 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 nicht von JavaScript 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 der zwischengespeicherten Antwort ermöglicht, vom Netzwerk aktualisiert zu werden (z. B. cache first with cache refresh).

navigate

Wird nur von der HTML-Navigation verwendet. Eine navigate-Anfrage wird nur beim Navigieren zwischen Dokumenten erstellt.

Weitere Details finden Sie unter Making cross-origin requests.

Standardwert ist cors.

priority Optional

Gibt die Priorität der Fetch-Anfrage im Verhältnis zu anderen Anfragen desselben Typs an. Muss einer der folgenden Werte sein:

high

Eine Fetch-Anfrage mit hoher Priorität im Verhältnis zu anderen Anfragen desselben Typs.

low

Eine Fetch-Anfrage mit niedriger Priorität im Verhältnis zu anderen Anfragen desselben Typs.

auto

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

Standardwert ist auto.

redirect Optional

Bestimmt das Verhalten des Browsers im Falle einer Umleitungsantwort des Servers. Einer der folgenden Werte:

follow

Automatisches Folgen von Umleitungen.

error

Das Versprechen mit einem Netzwerkfehler ablehnen, wenn ein Umleitungsstatus zurückgegeben wird.

manual

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

Standardwert ist follow.

referrer Optional

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

Eine gleiche-origin relative oder absolute URL

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

Ein leerer String

Den Referer-Header auslassen.

about:client

Setzt den Referer-Header auf den Standardwert für den Kontext der Anfrage (zum Beispiel die URL der Seite, die die Anfrage gestellt hat).

Standardwert ist about:client.

referrerPolicy Optional

Ein String, der eine Richtlinie für den Referer-Header festlegt. Die Syntax und Semantik dieser Option sind genau dieselben 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 Optionen method, body und headers 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 und übergeben dasselbe Set an Optionen in deren Konstruktor, und dann die Anfrage in fetch():

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 und übergeben die Optionen method, headers und body in deren Konstruktor. Dann übergeben wir die Anfrage zusammen mit den Optionen body und referrer in fetch():

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 access control (CORS)
• HTTP