RequestInit
Das RequestInit
Wörterbuch der Fetch API repräsentiert die Optionen, die zur Konfiguration einer Fetch-Anfrage verwendet werden können.
Sie können ein RequestInit
-Objekt in den Request()
-Konstruktor oder direkt in den fetch()
-Funktionsaufruf übergeben.
Sie können auch ein Request
mit einem RequestInit
erstellen und das Request
zusammen mit einem anderen RequestInit
an einen fetch()
-Aufruf übergeben. Wenn Sie dies tun und die gleiche Option an beiden Stellen gesetzt ist, wird der direkt an fetch()
übergebene Wert verwendet.
Instanz-Eigenschaften
attributionReporting
Optional Experimentell-
Gibt an, dass Sie möchten, dass die Antwort der Anfrage in der Lage ist, eine JavaScript-basierte Attributionsquelle oder einen Attribution Trigger zu registrieren.
attributionReporting
ist ein Objekt, das die folgenden Eigenschaften enthält:eventSourceEligible
-
Ein boolescher Wert. Wenn auf
true
gesetzt, kann die Antwort der Anfrage eine Attributionsquelle registrieren. Wenn auffalse
gesetzt, nicht. triggerEligible
-
Ein boolescher Wert. Wenn auf
true
gesetzt, kann die Antwort der Anfrage einen Attribution Trigger registrieren. Wenn auffalse
gesetzt, nicht.
Siehe die Attribution Reporting API für weitere Details.
body
Optional-
Der Anfrageinhalt enthält Daten, die an den Server gesendet werden, zum Beispiel in einer
POST
oderPUT
Anfrage. Es wird als Instanz eines der folgenden Typen spezifiziert:Siehe Festlegen eines Bodys für weitere Details.
browsingTopics
Optional Experimentell-
Ein boolescher Wert, 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.Siehe Verwendung der Topics API für weitere Details.
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 der Anfrage entspricht.
- Falls es eine Übereinstimmung gibt und diese frisch ist, wird sie aus dem Cache zurückgegeben.
- Falls es eine Übereinstimmung gibt, die veraltet ist, stellt der Browser eine konditionale Anfrage an den Remote-Server. Wenn der Server angibt, dass die Ressource unverändert ist, wird sie aus dem Cache zurückgegeben. Andernfalls wird die Ressource vom Server heruntergeladen und der Cache aktualisiert.
- Falls keine Übereinstimmung vorliegt, stellt der Browser eine normale Anfrage und aktualisiert den Cache mit der heruntergeladenen Ressource.
no-store
-
Der Browser ruft die Ressource vom Remote-Server ab, ohne zuerst im Cache nachzusehen, und wird den Cache nicht mit der heruntergeladenen Ressource aktualisieren.
reload
-
Der Browser ruft die Ressource vom Remote-Server ab, ohne zuerst im Cache nachzusehen, aber wird dann den Cache mit der heruntergeladenen Ressource aktualisieren.
no-cache
-
Der Browser sucht in seinem HTTP-Cache nach einer Antwort, die der Anfrage entspricht.
- Falls es eine Übereinstimmung gibt, frisch oder veraltet, stellt der Browser eine konditionale Anfrage an den Remote-Server. Wenn der Server angibt, dass die Ressource unverändert ist, wird sie aus dem Cache zurückgegeben. Andernfalls wird die Ressource vom Server heruntergeladen und der Cache aktualisiert.
- Falls keine Übereinstimmung vorliegt, 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 der Anfrage entspricht.
- Falls es eine Übereinstimmung gibt, frisch oder veraltet, wird sie aus dem Cache zurückgegeben.
- Falls keine Übereinstimmung vorliegt, 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 der Anfrage entspricht. Experimentell
- Falls es eine Übereinstimmung gibt, frisch oder veraltet, wird sie aus dem Cache zurückgegeben.
- Falls keine Übereinstimmung vorliegt, wird ein Netzwerkfehler zurückgegeben.
Der
"only-if-cached"
-Modus kann nur verwendet werden, wenn dermode
der Anfrage"same-origin"
ist. Zwischengespeicherte Weiterleitungen werden gefolgt, wenn dieredirect
-Eigenschaft der Anfrage"follow"
ist und die Weiterleitungen den"same-origin"
Modus nicht verletzen. credentials
Optional-
Bestimmt, 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
-
Anmeldeinformationen niemals in der Anfrage senden oder in der Antwort einbeziehen.
same-origin
-
Anmeldeinformationen nur für Anfragen mit demselben Ursprung senden und einbeziehen.
include
-
Anmeldeinformationen immer einbeziehen, auch bei Cross-Origin-Anfragen.
Das Einbeziehen von Anmeldeinformationen in Cross-Origin-Anfragen kann eine Website anfällig für CSRF-Angriffe machen. Selbst wenn
credentials
aufinclude
gesetzt ist, muss der Server auch ihrer Einbeziehung zustimmen, indem er denAccess-Control-Allow-Credentials
in seine Antwort aufnimmt. In diesem Fall muss der Server außerdem explizit den Ursprung des Clients imAccess-Control-Allow-Origin
-Antwortheader angeben (das heißt,*
ist nicht erlaubt).Siehe Einbeziehen von Anmeldeinformationen für weitere Details.
Der Standardwert ist
same-origin
. headers
Optional-
Alle Header, die Sie zu 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 Headerwerte sind.Viele Header werden automatisch vom Browser gesetzt und können nicht von einem Skript gesetzt werden: Dies sind die Verbotenen Anfrage-Header.
Wenn die
mode
-Option aufno-cors
gesetzt ist, können Sie nur die CORS-safelisted Anfrage-Header setzen.Siehe Header setzen für weitere Details.
integrity
Optional-
Enthält den Subresource Integritätswert der Anfrage.
Dieser 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 berechnet den Hash der abgerufenen Ressource mit dem angegebenen Algorithmus, und wenn das Ergebnis nicht mit dem angegebenen Wert übereinstimmt, lehnt der Browser die Fetch-Anfrage mit einem Netzwerkfehler ab.Das Format dieser Option ist
<hash-algo>-<hash-source>
, wobei:<hash-algo>
einer der folgenden Werte ist:sha256
,sha384
odersha512
<hash-source>
die Base64-Kodierung des Ergebnisses der Hash-Erstellung der Ressource mit dem angegebenen Hash-Algorithmus ist.
Der Standardwert ist ein leerer String.
keepalive
Optional-
Ein boolescher Wert. Wenn auf
true
gesetzt, wird der Browser die zugehörige Anfrage nicht abbrechen, wenn die Seite, die sie initiiert hat, entladen wird, bevor die Anfrage abgeschlossen ist. Dies ermöglicht es einerfetch()
-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 HTTP-Methoden außerPOST
verwenden, Anfrageeigenschaften 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.Der Standardwert ist
false
. method
Optional-
Die Anfragemethode.
Der Standardwert ist
GET
. mode
Optional-
Setzt das Verhalten der Anfrage bei Cross-Origin. 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, dann wird sie den Cross-Origin Resource Sharing (CORS) Mechanismus verwenden. Nur CORS-safelisted Antwort-Header sind in der Antwort verfügbar.
no-cors
-
Deaktiviert CORS für Cross-Origin-Anfragen. Diese Option bringt folgende Einschränkungen mit sich:
- Die Methode darf nur eine von
HEAD
,GET
oderPOST
sein. - Die Header dürfen nur CORS-safelisted Anfrage-Header sein, mit der zusätzlichen Einschränkung, dass der
Range
Header ebenfalls nicht erlaubt ist. Dies gilt auch für alle Header, die von Service Workern hinzugefügt wurden. - 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 eineno-cors
-Anfrage von JavaScript nicht gelesen werden kann, kann sie von einem Service Worker zwischengespeichert werden 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 übernehmen, die es ermöglicht, die zwischengespeicherte Antwort aus dem Netzwerk zu aktualisieren (wie Cache zuerst mit Cache-Aktualisierung). - Die Methode darf nur eine von
-
Wird nur von HTML-Navigation verwendet. Eine
navigate
-Anfrage wird nur beim Navigieren zwischen Dokumenten erstellt.
Siehe Cross-Origin-Anfragen durchführen für weitere Details.
Der Standardwert ist
cors
. priority
Optional-
Gibt die Priorität der Fetch-Anfrage relativ zu anderen Anfragen desselben Typs an. Muss einer der folgenden sein:
high
-
Eine Fetch-Anfrage mit hoher Priorität relativ zu anderen Anfragen desselben Typs.
low
-
Eine Fetch-Anfrage mit niedriger Priorität relativ zu anderen Anfragen desselben Typs.
auto
-
Keine Benutzervorgabe für die Fetch-Priorität. Es wird verwendet, wenn kein Wert gesetzt ist oder ein ungültiger Wert gesetzt ist.
Der Standardwert ist
auto
. redirect
Optional-
Bestimmt das Verhalten des Browsers, wenn der Server mit einem Weiterleitungs-Status antwortet. Einer der folgenden Werte:
follow
-
Folgen Sie automatisch Weiterleitungen.
error
-
Lehnen Sie das Versprechen mit einem Netzwerkfehler ab, wenn ein Weiterleitungsstatus zurückgegeben wird.
manual
-
Geben Sie eine Antwort mit fast allen herausgefilterten Feldern zurück, um es einem Service Worker zu ermöglichen, die Antwort zu speichern und später abzuspielen.
Der 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 gleich-origin relative oder absolute URL
-
Setzen Sie 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
-
Lassen Sie den
Referer
-Header weg. about:client
-
Setzen Sie den
Referer
-Header auf den Standardwert für den Kontext der Anfrage (zum Beispiel die URL der Seite, die die Anfrage durchgeführt hat).
Der 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 denReferrer-Policy
-Header. signal
Optional-
Ein
AbortSignal
. Wenn diese Option gesetzt ist, kann die Anfrage abgebrochen werden, indemabort()
beim entsprechendenAbortController
aufgerufen wird.
Beispiele
Optionen in fetch()
übergeben
In diesem Beispiel übergeben wir die method
, body
und headers
Optionen direkt an den fetch()
-Methodenaufruf:
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);
}
Optionen an den Request()
-Konstruktor übergeben
In diesem Beispiel erstellen wir eine Request
, indem wir denselben Satz von Optionen an seinen Konstruktor übergeben, und dann die Anfrage 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);
}
Optionen an Request()
und fetch()
übergeben
In diesem Beispiel erstellen wir eine Request
, indem wir die method
, headers
und body
Optionen an seinen Konstruktor übergeben. Dann übergeben wir 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: ""
Spezifikationen
Specification |
---|
Fetch # requestinit |