Wie gehe ich mit Weiterleitungen nach der Anmeldung mit der JavaScript-Abruf-API um?

Wie leite ich den Benutzer nach der Anmeldung mit der JavaScript-Fetch-API auf eine andere Seite um?

Bei Verwendung der fetch()-Funktion zum Durchführen einer POST-Anfrage an einen Server, der antwortet Mit einer RedirectResponse wird die Weiterleitung auf der Clientseite automatisch verfolgt. Dies liegt daran, dass der Umleitungsmodus in der Funktion fetch() standardmäßig auf „Folgen“ eingestellt ist. Infolgedessen wird der Benutzer nicht zur neuen URL umgeleitet, sondern fetch() folgt dieser Umleitung hinter den Kulissen und gibt die Antwort von der Umleitungs-URL zurück.

Um dies zu umgehen, können Sie prüfen, ob Die Antwort ist das Ergebnis einer von Ihnen gestellten Anfrage, die weitergeleitet wurde. Wenn ja, können Sie die URL-Eigenschaft der Antwort abrufen, die die endgültige URL zurückgibt, die **nach** etwaigen Weiterleitungen erhalten wurde, und mithilfe von window.location.href von JavaScript können Sie den Benutzer zur Ziel-URL umleiten (d. h Weiterleitungsseite). Anstelle von window.location.href kann man auch window.location.replace() verwenden. Der Unterschied zum Festlegen des href-Eigenschaftswerts besteht darin, dass bei Verwendung der Methode location.replace() nach dem Navigieren zur angegebenen URL die aktuelle Seite nicht im Sitzungsverlauf gespeichert wird, was bedeutet, dass der Benutzer die Rückseite nicht verwenden kann Klicken Sie auf die Schaltfläche, um dorthin zu navigieren.

Beispielcode:

<code class="javascript">document.getElementById("myForm").addEventListener("submit", function (e) {
  e.preventDefault(); // Cancel the default action
  var formElement = document.getElementById("myForm");
  var data = new FormData(formElement);
  fetch("http://my-server/login", {
    method: "POST",
    redirect: "follow", // Change it to "manual" if you want to handle redirects manually
    body: data,
  })
    .then((res) => {
      if (res.redirected) {
        window.location.href = res.url; // or, location.replace(res.url);
        return;
      } else {
        return res.text();
      }
    })
    .then((data) => {
      document.getElementById("response").innerHTML = data;
    })
    .catch((error) => {
      console.error(error);
    });
});</code>

Hinweis: Wenn Sie eine Cross-Origin-Anfrage verwenden, werden Sie dies tun Sie müssen den Antwortheader „Access-Control-Expose-Headers“ auf der Serverseite so festlegen, dass er den Header „Location“ enthält. Dies liegt daran, dass standardmäßig nur die auf der CORS-Sicherheitsliste aufgeführten Antwortheader verfügbar gemacht werden.

Das obige ist der detaillierte Inhalt vonWie gehe ich mit Weiterleitungen nach der Anmeldung mit der JavaScript-Abruf-API um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!