RequestInit
Das RequestInit-Wörterbuch der Fetch API stellt die Menge von Optionen dar, die verwendet werden können, um eine fetch request zu konfigurieren.
Sie können ein RequestInit-Objekt in den Request()-Konstruktor oder direkt in den Funktionsaufruf von fetch() einfügen.
Sie können auch ein Request mit einem RequestInit erstellen und das Request an einen fetch()-Aufruf zusammen mit einem anderen RequestInit übergeben. Wenn Sie dies tun und dieselbe Option an beiden Stellen gesetzt ist, wird der Wert verwendet, der direkt in fetch() übergeben wurde.
Instanz-Eigenschaften
attributionReportingOptional-
Gibt an, dass die Antwort der Anfrage in der Lage sein soll, eine auf JavaScript basierende Attributionquelle oder einen Attribution-Trigger zu registrieren.
attributionReportingist ein Objekt, das die folgenden Eigenschaften enthält:eventSourceEligible-
Ein Boolean. Wenn auf
truegesetzt, ist die Antwort der Anfrage berechtigt, eine Attributionquelle zu registrieren. Wenn auffalsegesetzt, ist es nicht berechtigt. triggerEligible-
Ein Boolean. Wenn auf
truegesetzt, ist die Antwort der Anfrage berechtigt, einen Attribution-Trigger zu registrieren. Wenn auffalsegesetzt, ist es nicht berechtigt.
Weitere Details finden Sie in der Attribution Reporting API.
bodyOptional-
Der Anfrageninhalt enthält den Inhalt, der an den Server gesendet werden soll, beispielsweise in einer
POSToderPUTAnfrage. Er wird als Instanz eines der folgenden Typen spezifiziert:Weitere Details finden Sie unter Setting a body.
browsingTopicsOptional-
Ein Boolean, der angibt, dass die ausgewählten Themen des aktuellen Nutzers in einem
Sec-Browsing-TopicsHeader mit der zugehörigen Anfrage gesendet werden sollten. cacheOptional-
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.
- Wenn es ein Übereinstimmung gibt und sie frisch ist, wird sie aus dem Cache zurückgegeben.
- Wenn es eine Übereinstimmung gibt, aber sie veraltet ist, wird der Browser eine bedingte Anfrage an den Remote-Server senden. Wenn der Server anzeigt, dass sich die Ressource nicht geä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, wird der Browser eine normale Anfrage stellen und den Cache mit der heruntergeladenen Ressource aktualisieren.
no-store-
Der Browser ruft die Ressource direkt 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 direkt vom Remote-Server ab, ohne zuerst im Cache nachzusehen, wird jedoch den Cache mit der heruntergeladenen Ressource aktualisieren.
no-cache-
Der Browser sucht in seinem HTTP-Cache nach einer Antwort, die der Anfrage entspricht.
- Wenn es eine Übereinstimmung gibt, frisch oder veraltet, wird der Browser eine bedingte Anfrage an den Remote-Server senden. Wenn der Server anzeigt, dass sich die Ressource nicht geä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, wird der Browser eine normale Anfrage stellen und den Cache mit der heruntergeladenen Ressource aktualisieren.
force-cache-
Der Browser sucht in seinem HTTP-Cache nach einer Antwort, die der Anfrage entspricht.
- Wenn es eine Übereinstimmung gibt, frisch oder veraltet, wird sie aus dem Cache zurückgegeben.
- Wenn es keine Übereinstimmung gibt, wird der Browser eine normale Anfrage stellen und den Cache mit der heruntergeladenen Ressource aktualisieren.
only-if-cached-
Der Browser sucht in seinem HTTP-Cache nach einer Antwort, die der Anfrage entspricht.
- Wenn es eine Übereinstimmung gibt, frisch oder veraltet, wird sie aus dem Cache zurückgegeben.
- Wenn es keine Übereinstimmung gibt, wird ein Netzwerkfehler zurückgegeben.
Der Modus
"only-if-cached"kann nur verwendet werden, wenn dermodeder Anfrage"same-origin"ist. Zwischengespeicherte Weiterleitungen werden befolgt, wenn dieredirect-Eigenschaft der Anfrage"follow"ist und die Weiterleitungen den"same-origin"Modus nicht verletzen. credentialsOptional-
Steuert, ob der Browser Anmeldeinformationen mit der Anfrage sendet und ob
Set-CookieAntwort-Header respektiert werden. Anmeldeinformationen sind Cookies, TLS-Client-Zertifikate oder Authentifizierungsheader mit einem Benutzernamen und Passwort. Diese Option kann einer der folgenden Werte sein:omit-
Sendet niemals Anmeldeinformationen in der Anfrage oder nimmt Anmeldeinformationen in die Antwort auf.
same-origin-
Sendet und nimmt Anmeldeinformationen nur für Same-Origin Anfragen auf.
include-
Enthält immer Anmeldeinformationen, auch bei Cross-Origin Anfragen.
Das Einbeziehen von Anmeldeinformationen bei Cross-Origin-Anfragen kann eine Website anfällig für CSRF Angriffe machen. Selbst wenn
credentialsaufincludegesetzt ist, muss der Server auch ihrem Einschluss zustimmen, indem er denAccess-Control-Allow-Credentialsin seiner Antwort einbezieht. Zudem muss der Server in diesem Fall ausdrücklich den Ursprung des Clients imAccess-Control-Allow-OriginAntwort-Header angeben (d.h.*ist nicht erlaubt).Weitere Details finden Sie unter Including credentials.
Standardmäßig auf
same-origin. duplexOptional-
Steuert das Duplex-Verhalten der Anfrage. Wenn dies vorhanden ist, muss es den Wert
halfhaben, was bedeutet, dass der Browser die gesamte Anfrage senden muss, bevor er die Antwort verarbeitet.Diese Option muss vorhanden sein, wenn
bodyeinReadableStreamist. headersOptional-
Alle Header, die Sie zu Ihrer Anfrage hinzufügen möchten, enthalten in einem
HeadersObjekt oder einem Objektliterale, dessen Schlüssel die Namen der Header und dessen Werte die Werte der Header sind.Viele Header werden automatisch vom Browser gesetzt und können nicht durch ein Skript gesetzt werden: Dies sind die sogenannten verbotenen Anfrage-Header.
Wenn die Option
modeaufno-corsgesetzt ist, können Sie nur CORS-safelisted request headers setzen.Weitere Details finden Sie unter Setting headers.
integrityOptional-
Enthält den Wert der Subresource Integrity der Anfrage.
Dies wird geprüft, wenn die Ressource abgerufen wird, genauso wie es geprüft würde, wenn das
integrityAttribut auf einem<script>Element gesetzt ist. Der Browser berechnet den Hash der abgerufenen Ressource unter Verwendung des angegebenen Algorithmus, und wenn das Ergebnis nicht mit dem angegebenen Wert übereinstimmt, wird der Abrufversuch vom Browser mit einem Netzwerkfehler abgelehnt.Das Format dieser Option ist
<hash-algo>-<hash-source>, wobei:<hash-algo>einer der folgenden Werte ist:sha256,sha384odersha512<hash-source>die Base64-Codierung des Ergebnisses des Hashings der Ressource mit dem angegebenen Hash-Algorithmus ist.
Standardmäßig ein leerer String.
keepaliveOptional-
Ein Boolean. Wenn er auf
truegesetzt ist, wird der Browser die zugehörige Anfrage nicht abbrechen, wenn die Seite, die sie initiiert hat, geladen wird, bevor die Anfrage abgeschlossen ist. Dies ermöglicht es einerfetch()-Anfrage, Analysen am Ende einer Sitzung zu senden, selbst wenn der Benutzer die Seite verlässt oder schließt.Dies bietet einige Vorteile gegenüber der Verwendung von
Navigator.sendBeacon()für denselben Zweck. Zum Beispiel können Sie HTTP-Methoden außerPOSTverwenden, Anfrageeigenschaften anpassen und auf die Serverantwort über die Erfüllung desPromisefetch zugreifen. Es steht auch in Service Workern zur Verfügung.Die Körpergröße für
keepalive-Anfragen ist auf 64 Kibibyte begrenzt.Standardmäßig
false. methodOptional-
Die Anfragemethode.
Standardmäßig
GET. modeOptional-
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 Mechanismus Cross-Origin Resource Sharing (CORS) angewendet. Nur CORS-safelisted response headers werden in der Antwort offengelegt.
no-cors-
Deaktiviert CORS für Cross-Origin-Anfragen. Diese Option kommt mit den folgenden Einschränkungen:
- Die Methode darf nur eine von
HEAD,GEToderPOSTsein. - Die Header dürfen nur CORS-safelisted request headers sein, mit dem zusätzlichen Ausschluss, dass der
RangeHeader 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 ihr Körper nicht für JavaScript zugänglich sind und ihr Statuscode immer
0ist.
Die Hauptanwendung für
no-corsist für einen Service Worker: obwohl die Antwort auf eineno-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 Cache-Strategie anwenden, die es dem zwischengespeicherten Antwort ermöglicht, aus dem Netzwerk aktualisiert zu werden (wie Cache first with cache refresh). - Die Methode darf nur eine von
-
Wird nur von HTML-Navigation verwendet. Eine
navigate-Anfrage wird nur während der Navigation zwischen Dokumenten erstellt.
Weitere Details finden Sie unter Making cross-origin requests.
Standardmäßig
cors. priorityOptional-
Legt die Priorität der Fetch-Anfrage im Vergleich zu anderen Anfragen desselben Typs fest. 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. Es wird verwendet, wenn kein Wert gesetzt ist oder ein ungültiger Wert gesetzt ist.
Standardmäßig
auto. privateTokenOptional-
Ein Objekt, das Optionen für die Initiierung einer Private State Token Operation enthält. Mögliche Eigenschaften sind:
issuers-
Ein Array von Strings, das die URLs von Ausstellern enthält, für die Sie Einlösungsdatensätze weiterleiten möchten. Diese Einstellung wird ignoriert, es sei denn,
operationist aufsend-redemption-recordgesetzt, in diesem Fall muss dasissuersArray enthalten sein. operation-
Ein String, der den Typ der Token-Operation darstellt, die Sie initiieren möchten. Bei Angabe der
privateToken-Option ist diese Eigenschaft obligatorisch. Mögliche Werte sind:token-request-
Initiert eine Tokenanfrage Operation.
token-redemption-
Initiert eine Token-Einlösung Operation.
send-redemption-record-
Initiert eine Send Redemption Record Operation.
refreshPolicy-
Ein enumerierter Wert, der das erwartete Verhalten angibt, wenn ein nicht abgelaufener Einlösungsdatensatz für den aktuellen Benutzer und die aktuelle Website zuvor festgelegt wurde. Diese Einstellung wird ignoriert, es sei denn,
operationist auftoken-redemptiongesetzt. Mögliche Werte sind: version-
Eine Zahl, die die Version des kryptographischen Protokolls angibt, das beim Generieren eines Tokens verwendet werden soll. Derzeit ist dies immer auf
1gesetzt, was die einzige Version ist, die die Spezifikation unterstützt. Bei Angabe derprivateToken-Option ist diese Eigenschaft obligatorisch.
redirectOptional-
Bestimmt das Verhalten des Browsers im Falle einer Serverantwort mit einem Redirect-Status. Einer der folgenden Werte:
follow-
Leitet Weiterleitungen automatisch weiter.
error-
Lehnt das Versprechen mit einem Netzwerkfehler ab, wenn ein Weiterleitungsstatus zurückgegeben wird.
manual-
Gibt eine Antwort mit fast allen ausgefilterten Feldern zurück, um einem Service Worker zu ermöglichen, die Antwort zu speichern und später erneut abzuspielen.
Standardmäßig
follow. referrerOptional-
Ein String, der den Wert angibt, der für den
Referer-Header der Anfrage verwendet werden soll. Einer der folgenden:- Eine Same-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
-
Lässt den
Referer-Header weg. about:client-
Setzt den
Referer-Header auf den Standardwert für den Kontext der Anfrage (beispielsweise die URL der Seite, die die Anfrage gestellt hat).
Standardmäßig
about:client. referrerPolicyOptional-
Ein String, der eine Richtlinie für den
Referer-Header setzt. Die Syntax und Semantik dieser Option ist genau wie die desReferrer-PolicyHeaders. signalOptional-
Ein
AbortSignal. Wenn diese Option gesetzt ist, kann die Anfrage durch Aufrufen vonabort()auf dem entsprechendenAbortControllerabgebrochen werden. targetAddressSpaceOptional-
Ein enumerierter Wert, der angibt, ob die Anfrage als Loopback-, lokale oder öffentliche Anfrage gedacht ist. Dies steuert, wie der Benutzeragent mit gemischtem Inhalt umgeht. Gültige Werte sind:
local-
Die Anfrage erfolgt an eine lokale Adresse, die nur im lokalen Netzwerk zugänglich ist; ihr Ziel wird in verschiedenen Netzwerken unterschiedlich sein. Zum Beispiel
192.168.0.1. loopback-
Die Anfrage erfolgt an eine Loopback-Adresse, die nur auf dem lokalen Gerät zugänglich ist; ihr Ziel wird auf jedem Gerät unterschiedlich sein. Zum Beispiel
127.0.0.1, allgemein bekannt alslocalhost. public-
Die Anfrage erfolgt an eine Adresse, die von überall im Internet zugänglich ist; ihr Ziel ist global auf allen Geräten gleich.
Weitere Informationen finden Sie unter Local Network Access.
Beispiele
>Optionen in fetch() übergeben
In diesem Beispiel übergeben wir die Optionen method, body und headers direkt in die 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 in den Request()-Konstruktor übergeben
In diesem Beispiel erstellen wir eine Request, übergeben denselben Satz von Optionen in ihren Konstruktor und übergeben die Anfrage dann an 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);
}
Optionen sowohl in Request() als auch in fetch() übergeben
In diesem Beispiel erstellen wir eine Request, indem wir die Optionen method, headers und body in ihren Konstruktor übergeben. Dann übergeben wir die Anfrage an fetch() zusammen mit den Optionen body und referrer:
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
| Spezifikation |
|---|
| Fetch> # requestinit> |