如何使用 JavaScript Fetch API 處理登入後的重新導向？

如何使用 JavaScript Fetch API 登入後將使用者重新導向到另一個頁面？

當使用 fetch() 函數向回應的伺服器執行 POST 請求時使用 RedirectResponse，客戶端將自動遵循重定向。這是因為 fetch() 函數中預設設定了重定向模式。因此，用戶不會被重定向到新的 URL，而是 fetch() 將在幕後遵循該重定向並從重定向 URL 返回回應。

要解決此問題，您可以檢查是否回應是您發出的重定向請求的結果。如果是這樣，您可以檢索回應的url 屬性，該屬性將返回在任何重定向之後**獲得的最終URL，並且使用JavaScript 的window.location.href，您可以將使用者重定向到目標URL（即重定向頁面）。除了 window.location.href 之外，還可以使用 window.location.replace()。與設定href 屬性值的差異在於，使用location.replace() 方法時，導航至給定URL 後，目前頁面不會保存在會話歷史記錄中，這表示使用者將無法使用傳回的頁面按鈕導航到它。

範例程式碼：

<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>

注意：如果您使用跨來源請求，您將需要在伺服器端設定Access-Control- Expose-Headers 回應標頭以包含Location 標頭。這是因為預設僅公開 CORS 安全清單回應標頭。

以上是如何使用 JavaScript Fetch API 處理登入後的重新導向？的詳細內容。更多資訊請關注PHP中文網其他相關文章！