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>

注: クロスオリジン リクエストを使用している場合は、 Location ヘッダーを含めるように、サーバー側で Access-Control-Expose-Headers 応答ヘッダーを設定する必要があります。これは、CORS セーフリストに登録された応答ヘッダーのみがデフォルトで公開されるためです。

以上がJavaScript Fetch API を使用してログイン後にリダイレクトを処理する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。