Fetch API

Dieses Codelab ist Teil des Kurses „Progressive Web-Apps entwickeln“, der vom Google Developers Training-Team entwickelt wurde. Sie können den größten Nutzen aus diesem Kurs ziehen, wenn Sie die Codelabs der Reihe nach durcharbeiten.

Weitere Informationen zum Kurs

Einführung

In diesem Lab erfahren Sie, wie Sie die Fetch API verwenden, eine einfache Schnittstelle zum Abrufen von Ressourcen, die eine Verbesserung gegenüber der XMLHttpRequest API darstellt.

Lerninhalte

  • Ressourcen mit der Fetch API anfordern
  • GET-, HEAD- und POST-Anfragen mit „fetch“ stellen
  • Benutzerdefinierte Header lesen und festlegen
  • Nutzung und Einschränkungen von CORS

Wichtige Informationen

  • Einfaches JavaScript und HTML
  • Vertrautheit mit dem Konzept und der grundlegenden Syntax von ES2015-Promises

Voraussetzungen

  • Computer mit Terminal-/Shell-Zugriff
  • Internetverbindung
  • Ein Browser, der Fetch unterstützt
  • Ein Texteditor
  • Node und npm

Hinweis:Die Fetch API wird derzeit nicht in allen Browsern unterstützt. Es gibt jedoch ein Polyfill.

Laden Sie das Repository „pwa-training-labs“ von GitHub herunter oder klonen Sie es und installieren Sie bei Bedarf die LTS-Version von Node.js.

Öffnen Sie die Befehlszeile Ihres Computers. Wechseln Sie in das Verzeichnis fetch-api-lab/app/ und starten Sie einen lokalen Entwicklungsserver:

cd fetch-api-lab/app
npm install
node server.js

Sie können den Server jederzeit mit Ctrl-c beenden.

Öffnen Sie Ihren Browser und rufen Sie localhost:8081/ auf. Es sollte eine Seite mit Schaltflächen für Anfragen angezeigt werden (diese funktionieren noch nicht).

Hinweis:Melden Sie alle Service Worker ab und löschen Sie alle Service Worker-Caches für localhost, damit sie das Lab nicht beeinträchtigen. In den Chrome-Entwicklertools können Sie dazu auf dem Tab Anwendung im Bereich Speicher löschen auf Websitedaten löschen klicken.

Öffnen Sie den Ordner fetch-api-lab/app/ in Ihrem bevorzugten Texteditor. Im Ordner app/ erstellen Sie das Lab.

Dieser Ordner enthält:

  • echo-servers/ enthält Dateien, die zum Ausführen von Testservern verwendet werden.
  • examples/ enthält Beispielressourcen, die wir für Tests mit „fetch“ verwenden.
  • js/main.js ist das Haupt-JavaScript für die App. Hier schreiben Sie den gesamten Code.
  • index.html ist die Haupt-HTML-Seite für unsere Beispielwebsite/-anwendung.
  • package-lock.json und package.json sind Konfigurationsdateien für unseren Entwicklungsserver und die Echo-Server-Abhängigkeiten.
  • server.js ist ein Node-Entwicklungsserver.

Die Fetch API hat eine relativ einfache Schnittstelle. In diesem Abschnitt wird beschrieben, wie Sie mit „fetch“ eine einfache HTTP-Anfrage schreiben.

JSON-Datei abrufen

In js/main.js ist die Schaltfläche Fetch JSON der App mit der Funktion fetchJSON verknüpft.

Aktualisieren Sie die Funktion fetchJSON, um die Datei examples/animals.json anzufordern und die Antwort zu protokollieren: 

function fetchJSON() {
  fetch('examples/animals.json')
    .then(logResult)
    .catch(logError);
}

Speichern Sie das Skript und aktualisieren Sie die Seite. Klicken Sie auf JSON abrufen. Die Fetch-Antwort sollte in der Konsole protokolliert werden.

Erklärung

Die Methode fetch akzeptiert den Pfad für die Ressource, die wir abrufen möchten, als Parameter, in diesem Fall examples/animals.json. fetch gibt ein Promise zurück, das in ein Response-Objekt aufgelöst wird. Wenn das Promise aufgelöst wird, wird die Antwort an die Funktion logResult übergeben. Wenn das Promise abgelehnt wird, übernimmt catch und der Fehler wird an die Funktion logError übergeben.

Antwortobjekte stellen die Antwort auf eine Anfrage dar. Sie enthalten den Antworttext sowie nützliche Attribute und Methoden.

Ungültige Antworten testen

Sehen Sie sich die protokollierte Antwort in der Console an. Notieren Sie sich die Werte der Attribute status, url und ok.

Ersetzen Sie die Ressource examples/animals.json in fetchJSON durch examples/non-existent.json. Die aktualisierte fetchJSON-Funktion sollte jetzt so aussehen:

function fetchJSON() {
  fetch('examples/non-existent.json')
    .then(logResult)
    .catch(logError);
}

Speichern Sie das Skript und aktualisieren Sie die Seite. Klicken Sie noch einmal auf JSON abrufen, um zu versuchen, diese nicht vorhandene Ressource abzurufen.

Prüfen Sie, ob der Abruf erfolgreich abgeschlossen wurde und nicht den catch-Block ausgelöst hat. Suchen Sie nun nach den Attributen status, URL und ok der neuen Antwort.

Die Werte sollten sich für die beiden Dateien unterscheiden. Wissen Sie, warum? Wenn Sie Konsolenfehler erhalten haben, stimmen die Werte mit dem Kontext des Fehlers überein?

Erklärung

Warum wurde der catch-Block nicht aktiviert, als eine Antwort fehlgeschlagen ist? Das ist ein wichtiger Hinweis für Fetch und Promises: Schlechte Antworten (z. B. 404) werden trotzdem aufgelöst. Ein Fetch-Promise wird nur abgelehnt, wenn die Anfrage nicht abgeschlossen werden konnte. Sie müssen also immer die Gültigkeit der Antwort prüfen. Im nächsten Abschnitt werden wir die Antworten validieren.

Weitere Informationen

Gültigkeit der Antwort prüfen

Wir müssen unseren Code aktualisieren, um die Gültigkeit von Antworten zu prüfen.

Fügen Sie in main.js eine Funktion zum Validieren von Antworten hinzu:

function validateResponse(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}

Ersetzen Sie dann fetchJSON durch den folgenden Code:

function fetchJSON() {
  fetch('examples/non-existent.json')
    .then(validateResponse)
    .then(logResult)
    .catch(logError);
}

Speichern Sie das Skript und aktualisieren Sie die Seite. Klicken Sie auf JSON abrufen. Überprüfen Sie die Konsole. Die Antwort für examples/non-existent.json sollte jetzt den Block catch auslösen.

Ersetzen Sie examples/non-existent.json in der Funktion fetchJSON durch das ursprüngliche examples/animals.json. Die aktualisierte Funktion sollte jetzt so aussehen:

function fetchJSON() {
  fetch('examples/animals.json')
    .then(validateResponse)
    .then(logResult)
    .catch(logError);
}

Speichern Sie das Skript und aktualisieren Sie die Seite. Klicken Sie auf JSON abrufen. Sie sollten sehen, dass die Antwort wie zuvor erfolgreich protokolliert wird.

Erklärung

Nachdem wir die validateResponse-Prüfung hinzugefügt haben, wird bei schlechten Antworten (z. B. 404-Fehlern) ein Fehler ausgegeben und catch übernimmt. So können wir fehlgeschlagene Antworten verarbeiten und verhindern, dass unerwartete Antworten in der Fetch-Kette weitergegeben werden.

Antwort lesen

Abrufantworten werden als ReadableStreams (Streams-Spezifikation) dargestellt und müssen gelesen werden, um auf den Antworttext zuzugreifen. Antwortobjekte haben Methoden, mit denen Sie das tun können.

Fügen Sie in main.js eine readResponseAsJSON-Funktion mit dem folgenden Code hinzu:

function readResponseAsJSON(response) {
  return response.json();
}

Ersetzen Sie dann die Funktion fetchJSON durch den folgenden Code:

function fetchJSON() {
  fetch('examples/animals.json') // 1
  .then(validateResponse) // 2
  .then(readResponseAsJSON) // 3
  .then(logResult) // 4
  .catch(logError);
}

Speichern Sie das Skript und aktualisieren Sie die Seite. Klicken Sie auf JSON abrufen. Prüfen Sie in der Konsole, ob das JSON aus examples/animals.json protokolliert wird (anstelle des Response-Objekts).

Erklärung

Sehen wir uns an, was passiert.

Schritt 1: „Fetch“ wird für eine Ressource aufgerufen, examples/animals.json. „Fetch“ gibt ein Promise zurück, das in ein Response-Objekt aufgelöst wird. Wenn das Promise aufgelöst wird, wird das Antwortobjekt an validateResponse übergeben.

Schritt 2: validateResponse prüft, ob die Antwort gültig ist (ist es ein 200?). Andernfalls wird ein Fehler ausgegeben, der Rest der then-Blöcke wird übersprungen und der catch-Block wird ausgelöst. Das ist besonders wichtig. Ohne diese Prüfung werden fehlerhafte Antworten in der Kette weitergegeben und können später Code beschädigen, der auf den Empfang einer gültigen Antwort angewiesen ist. Wenn die Antwort gültig ist, wird sie an readResponseAsJSON übergeben.

Schritt 3: readResponseAsJSON liest den Text der Antwort mit der Methode Response.json(). Diese Methode gibt ein Promise zurück, das in JSON aufgelöst wird. Sobald dieses Promise aufgelöst wird, werden die JSON-Daten an logResult übergeben. (Wenn das Promise von response.json() abgelehnt wird, wird der catch-Block ausgelöst.)

Schritt 4: Schließlich werden die JSON-Daten aus der ursprünglichen Anfrage an examples/animals.json von logResult protokolliert.

Weitere Informationen

Fetch ist nicht auf JSON beschränkt. In diesem Beispiel rufen wir ein Bild ab und hängen es an die Seite an.

Schreiben Sie in main.js eine showImage-Funktion mit dem folgenden Code:

function showImage(responseAsBlob) {
  const container = document.getElementById('img-container');
  const imgElem = document.createElement('img');
  container.appendChild(imgElem);
  const imgUrl = URL.createObjectURL(responseAsBlob);
  imgElem.src = imgUrl;
}

Fügen Sie dann eine readResponseAsBlob-Funktion hinzu, die Antworten als Blob liest:

function readResponseAsBlob(response) {
  return response.blob();
}

Aktualisieren Sie die Funktion fetchImage mit dem folgenden Code:

function fetchImage() {
  fetch('examples/fetching.jpg')
    .then(validateResponse)
    .then(readResponseAsBlob)
    .then(showImage)
    .catch(logError);
}

Speichern Sie das Skript und aktualisieren Sie die Seite. Klicken Sie auf Bild abrufen. Auf der Seite sollte ein niedlicher Hund zu sehen sein, der einen Stock apportiert (ein Wortspiel).

Erklärung

In diesem Beispiel wird ein Bild abgerufen: examples/fetching.jpg. Wie in der vorherigen Übung wird die Antwort mit validateResponse validiert. Die Antwort wird dann als Blob gelesen (anstelle von JSON wie im vorherigen Abschnitt). Ein Bildelement wird erstellt und an die Seite angehängt. Das Attribut src des Bildes wird auf eine Daten-URL gesetzt, die den Blob darstellt.

Hinweis:Die createObjectURL()-Methode des URL-Objekts wird verwendet, um eine Daten-URL zu generieren, die das Blob darstellt. Das ist wichtig. Sie können die Quelle eines Bildes nicht direkt auf ein Blob festlegen. Der Blob muss in eine Daten-URL konvertiert werden.

Weitere Informationen

Dieser Abschnitt ist eine optionale Aufgabe.

Aktualisieren Sie die Funktion fetchText auf

  1. fetch /examples/words.txt
  2. Antwort mit validateResponse bestätigen
  3. Die Antwort als Text lesen (Hinweis: siehe Response.text())
  4. und den Text auf der Seite anzeigen.

Sie können diese showText-Funktion als Hilfsmittel zum Anzeigen des endgültigen Texts verwenden:

function showText(responseAsText) {
  const message = document.getElementById('message');
  message.textContent = responseAsText;
}

Speichern Sie das Skript und aktualisieren Sie die Seite. Klicken Sie auf Text abrufen. Wenn Sie fetchText korrekt implementiert haben, sollte auf der Seite zusätzlicher Text angezeigt werden.

Hinweis : Es kann verlockend sein, HTML abzurufen und mit dem Attribut innerHTML anzuhängen. Seien Sie jedoch vorsichtig. Dadurch kann Ihre Website Cross-Site-Scripting-Angriffen ausgesetzt sein.

Weitere Informationen

Standardmäßig wird mit „fetch“ die GET-Methode verwendet, mit der eine bestimmte Ressource abgerufen wird. Für den Abruf können aber auch andere HTTP-Methoden verwendet werden.

HEAD-Anfrage stellen

Ersetzen Sie die Funktion headRequest durch den folgenden Code:

function headRequest() {
  fetch('examples/words.txt', {
    method: 'HEAD'
  })
  .then(validateResponse)
  .then(readResponseAsText)
  .then(logResult)
  .catch(logError);
}

Speichern Sie das Skript und aktualisieren Sie die Seite. Klicken Sie auf HEAD-Anfrage. Der protokollierte Textinhalt ist leer.

Erklärung

Die Methode fetch kann einen zweiten optionalen Parameter, init, empfangen. Mit diesem Parameter kann die Abrufanfrage konfiguriert werden, z. B. die Anfragemethode, der Cachemodus, die Anmeldedaten und mehr.

In diesem Beispiel legen wir die Methode der Fetch-Anfrage mit dem Parameter init auf HEAD fest. HEAD-Anfragen funktionieren wie GET-Anfragen, nur dass der Antworttext leer ist. Diese Art von Anfrage kann verwendet werden, wenn Sie nur Metadaten zu einer Datei benötigen, aber nicht alle Daten der Datei übertragen müssen.

Optional: Größe einer Ressource ermitteln

Sehen wir uns die Header der Abrufantwort für examples/words.txt an, um die Größe der Datei zu ermitteln.

Aktualisieren Sie die Funktion headRequest so, dass die Eigenschaft content-length der Antwort headers protokolliert wird. Hinweis: Weitere Informationen finden Sie in der Dokumentation zu headers und der Methode get.

Speichern Sie die Datei und aktualisieren Sie die Seite, nachdem Sie den Code aktualisiert haben. Klicken Sie auf HEAD-Anfrage. Die Konsole sollte die Größe (in Byte) von examples/words.txt protokollieren.

Erklärung

In diesem Beispiel wird mit der HEAD-Methode die Größe (in Byte) einer Ressource angefordert, die im content-length-Header dargestellt wird, ohne die Ressource selbst zu laden. In der Praxis könnte dies verwendet werden, um zu bestimmen, ob die vollständige Ressource angefordert werden soll (oder wie sie angefordert werden soll).

Optional: Ermitteln Sie die Größe von examples/words.txt mit einer anderen Methode und prüfen Sie, ob sie mit dem Wert aus dem Antwortheader übereinstimmt. Informationen dazu, wie Sie das für Ihr Betriebssystem tun können, finden Sie in der Dokumentation.

Weitere Informationen

Mit Fetch können auch Daten mit POST-Anfragen gesendet werden.

Echo-Server einrichten

Für dieses Beispiel müssen Sie einen Echo-Server ausführen. Führen Sie im Verzeichnis fetch-api-lab/app/ den folgenden Befehl aus. Wenn die Befehlszeile durch den localhost:8081-Server blockiert wird, öffnen Sie ein neues Befehlszeilenfenster oder einen neuen Tab:

node echo-servers/cors-server.js

Mit diesem Befehl wird ein einfacher Server unter localhost:5000/ gestartet, der die an ihn gesendeten Anfragen zurückgibt.

Sie können diesen Server jederzeit mit ctrl+c beenden.

POST-Anfrage stellen

Ersetzen Sie die Funktion postRequest durch den folgenden Code. Achten Sie darauf, dass Sie die Funktion showText aus Abschnitt 4 definiert haben, falls Sie den Abschnitt nicht durchgearbeitet haben:

function postRequest() {
  fetch('http://localhost:5000/', {
    method: 'POST',
    body: 'name=david&message=hello'
  })
    .then(validateResponse)
    .then(readResponseAsText)
    .then(showText)
    .catch(logError);
}

Speichern Sie das Skript und aktualisieren Sie die Seite. Klicken Sie auf POST-Anfrage. Die gesendete Anfrage wird auf der Seite angezeigt. Sie sollte den Namen und die Nachricht enthalten. Beachten Sie, dass wir noch keine Daten aus dem Formular abrufen.

Erklärung

Um eine POST-Anfrage mit „fetch“ zu senden, verwenden wir den Parameter init, um die Methode anzugeben (ähnlich wie wir die HEAD-Methode im vorherigen Abschnitt festgelegt haben). Hier legen wir auch den body der Anfrage fest, in diesem Fall einen einfachen String. Der Body enthält die Daten, die wir senden möchten.

Hinweis:In der Produktionsumgebung sollten Sie immer alle vertraulichen Nutzerdaten verschlüsseln.

Wenn Daten als POST-Anfrage an localhost:5000/ gesendet werden, wird die Anfrage als Antwort zurückgegeben. Die Antwort wird dann mit validateResponse validiert, als Text gelesen und auf der Seite angezeigt.

In der Praxis würde dieser Server eine Drittanbieter-API darstellen.

Optional: FormData-Schnittstelle verwenden

Mit der FormData-Schnittstelle können Sie ganz einfach Daten aus Formularen abrufen.

Instanziieren Sie in der Funktion postRequest ein neues FormData-Objekt aus dem Formularelement msg-form:

const formData = new FormData(document.getElementById('msg-form'));

Ersetzen Sie dann den Wert des Parameters body durch die Variable formData.

Speichern Sie das Skript und aktualisieren Sie die Seite. Füllen Sie das Formular auf der Seite aus (die Felder Name und Message) und klicken Sie dann auf POST-Anfrage. Sehen Sie sich den Formularinhalt auf der Seite an.

Erklärung

Der FormData-Konstruktor kann ein HTML-form-Element entgegennehmen und ein FormData-Objekt erstellen. Dieses Objekt wird mit den Schlüsseln und Werten des Formulars gefüllt.

Weitere Informationen

Nicht-CORS-Echo-Server starten

Beenden Sie den vorherigen Echo-Server (indem Sie in der Befehlszeile ctrl+c drücken) und starten Sie einen neuen Echo-Server aus dem Verzeichnis fetch-lab-api/app/, indem Sie den folgenden Befehl ausführen:

node echo-servers/no-cors-server.js

Mit diesem Befehl wird ein weiterer einfacher Echo-Server eingerichtet, diesmal unter localhost:5001/. Dieser Server ist jedoch nicht für die Annahme von Cross-Origin-Anfragen konfiguriert.

Vom neuen Server abrufen

Da der neue Server jetzt unter localhost:5001/ ausgeführt wird, können wir eine Abrufanfrage an ihn senden.

Aktualisieren Sie die Funktion postRequest so, dass Daten von localhost:5001/ anstelle von localhost:5000/ abgerufen werden. Nachdem Sie den Code aktualisiert haben, speichern Sie die Datei, aktualisieren Sie die Seite und klicken Sie dann auf POST Request (POST-Anfrage).

In der Konsole sollte ein Fehler angezeigt werden, der darauf hinweist, dass die ursprungsübergreifende Anfrage blockiert wird, weil der CORS-Header Access-Control-Allow-Origin fehlt.

Aktualisieren Sie fetch in der Funktion postRequest mit dem folgenden Code, der den Modus no-cors verwendet (wie im Fehlerlog angegeben) und die Aufrufe von validateResponse und readResponseAsText entfernt (siehe Erklärung unten):

function postRequest() {
  const formData = new FormData(document.getElementById('msg-form'));
  fetch('http://localhost:5001/', {
    method: 'POST',
    body: formData,
    mode: 'no-cors'
  })
    .then(logResult)
    .catch(logError);
}

Speichern Sie das Skript und aktualisieren Sie die Seite. Füllen Sie dann das Mitteilungsformular aus und klicken Sie auf POST-Anfrage.

Sehen Sie sich das in der Konsole protokollierte Antwortobjekt an.

Erklärung

Fetch- und XMLHttpRequest-Aufrufe folgen der Same-Origin-Policy. Das bedeutet, dass Browser quellenübergreifende HTTP-Anfragen aus Skripts einschränken. Eine ursprungsübergreifende Anfrage erfolgt, wenn eine Domain (z. B. http://foo.com/) eine Ressource von einer separaten Domain (z. B. http://bar.com/) anfordert.

Hinweis:Einschränkungen für anfrageübergreifende Ursprünge führen oft zu Verwirrung. Viele Ressourcen wie Bilder, Stylesheets und Skripts werden domainübergreifend (d.h. ursprungsübergreifend) abgerufen. Dies sind jedoch Ausnahmen von der Richtlinie für denselben Ursprung. Cross-Origin-Anfragen sind weiterhin in Scripts eingeschränkt.

Da der Server unserer App eine andere Portnummer als die beiden Echoserver hat, gelten Anfragen an einen der beiden Echoserver als ursprungsübergreifend. Der erste Echoserver, der auf localhost:5000/ ausgeführt wird, ist jedoch für die Unterstützung von CORS konfiguriert. Sie können echo-servers/cors-server.js öffnen und die Konfiguration prüfen. Der neue Echoserver, der auf localhost:5001/ ausgeführt wird, ist nicht vorhanden (weshalb wir einen Fehler erhalten).

Mit mode: no-cors kann eine undurchsichtige Antwort abgerufen werden. So können wir eine Antwort erhalten, aber der Zugriff auf die Antwort mit JavaScript wird verhindert. Aus diesem Grund können wir validateResponse, readResponseAsText oder showResponse nicht verwenden. Die Antwort kann aber weiterhin von anderen APIs verwendet oder von einem Service Worker im Cache gespeichert werden.

Anfrageheader ändern

Mit Fetch können auch Anfrageheader geändert werden. Stoppen Sie den localhost:5001-Echoserver (ohne CORS) und starten Sie den localhost:5000-Echoserver (mit CORS) aus Abschnitt 6 neu:

node echo-servers/cors-server.js

Stellen Sie die vorherige Version der postRequest-Funktion wieder her, die Daten aus localhost:5000/ abruft:

function postRequest() {
  const formData = new FormData(document.getElementById('msg-form'));
  fetch('http://localhost:5000/', {
    method: 'POST',
    body: formData
  })
    .then(validateResponse)
    .then(readResponseAsText)
    .then(showText)
    .catch(logError);
}

Verwenden Sie nun die Header-Schnittstelle, um in der postRequest-Funktion namens messageHeaders ein Headers-Objekt zu erstellen, bei dem der Content-Type-Header gleich application/json ist.

Legen Sie dann das Attribut headers des init-Objekts auf die Variable messageHeaders fest.

Aktualisieren Sie das Attribut body zu einem in einen String umgewandelten JSON-Objekt, z. B.:

JSON.stringify({ lab: 'fetch', status: 'fun' })

Speichern Sie die Datei und aktualisieren Sie die Seite, nachdem Sie den Code aktualisiert haben. Klicken Sie dann auf POST-Anfrage.

Die zurückgegebene Anfrage hat jetzt einen Content-Type von application/json (im Gegensatz zu multipart/form-data wie zuvor).

Fügen Sie dem messageHeaders-Objekt jetzt einen benutzerdefinierten Content-Length-Header hinzu und geben Sie der Anfrage eine beliebige Größe.

Nachdem Sie den Code aktualisiert haben, speichern Sie die Datei, aktualisieren Sie die Seite und klicken Sie auf POST-Anfrage. Beachten Sie, dass dieser Header in der gespiegelten Anfrage nicht geändert wird.

Erklärung

Über die Headers-Schnittstelle können Headers-Objekte erstellt und geändert werden. Einige Header wie Content-Type können durch den Abruf geändert werden. Andere, z. B. Content-Length, sind geschützt und können aus Sicherheitsgründen nicht geändert werden.

Benutzerdefinierte Anfrageheader festlegen

Fetch unterstützt das Festlegen benutzerdefinierter Header.

Entfernen Sie den Header Content-Length aus dem Objekt messageHeaders in der Funktion postRequest. Fügen Sie den benutzerdefinierten Header X-Custom mit einem beliebigen Wert hinzu (z. B. „X-CUSTOM': 'hello world'“).

Speichern Sie das Skript, aktualisieren Sie die Seite und klicken Sie dann auf POST-Anfrage.

Die zurückgegebene Anfrage sollte die Property X-Custom enthalten, die Sie hinzugefügt haben.

Fügen Sie dem Headers-Objekt jetzt einen Y-Custom-Header hinzu. Speichern Sie das Skript, aktualisieren Sie die Seite und klicken Sie auf POST Request (POST-Anfrage).

In der Konsole sollte ein Fehler wie der folgende angezeigt werden:

Fetch API cannot load http://localhost:5000/. Request header field y-custom is not allowed by Access-Control-Allow-Headers in preflight response.

Erklärung

Wie bei Cross-Origin-Anfragen müssen benutzerdefinierte Header vom Server unterstützt werden, von dem die Ressource angefordert wird. In diesem Beispiel ist unser Echoserver so konfiguriert, dass er den X-Custom-Header, aber nicht den Y-Custom-Header akzeptiert. Sie können echo-servers/cors-server.js öffnen und nach Access-Control-Allow-Headers suchen, um sich selbst davon zu überzeugen. Immer wenn ein benutzerdefinierter Header festgelegt wird, führt der Browser eine Preflight-Prüfung durch. Das bedeutet, dass der Browser zuerst eine OPTIONS-Anfrage an den Server sendet, um zu ermitteln, welche HTTP-Methoden und ‑Header vom Server zugelassen werden. Wenn der Server so konfiguriert ist, dass er die Methode und die Header der ursprünglichen Anfrage akzeptiert, wird sie gesendet. Andernfalls wird ein Fehler ausgegeben.

Weitere Informationen

Lösungscode

Wenn Sie eine Kopie des funktionierenden Codes erhalten möchten, rufen Sie den Ordner solution auf.

Jetzt wissen Sie, wie Sie die Fetch API verwenden.

Ressourcen

Eine Liste aller Codelabs im PWA-Schulungskurs finden Sie im Willkommens-Codelab für den Kurs.