JavaScript fetch api？

を使用してjavascript fetch apiを使用してログインした後、ユーザーを別のページにリダイレクトする方法RedirectResponseを使用すると、クライアント側でリダイレクトが自動的に追跡されます。これは、redirectモードがfetch（）関数でデフォルトで従うように設定されているためです。その結果、ユーザーは新しいURLにリダイレクトされませんが、むしろFetch（）は舞台裏でそのリダイレクトに従い、リダイレクトURLから応答を返します。応答は、リダイレクトされたリクエストの結果です。その場合、応答のURLプロパティを取得できます。これにより、**リダイレクトの後に得られた最終的なURLが返されます。リダイレクトページ）。 window.location.hrefの代わりに、window.location.replace（）を使用することもできます。 HREFプロパティ値の設定との違いは、location.replace（）メソッドを使用する場合、指定されたURLに移動した後、現在のページがセッション履歴に保存されないことです。

例Code：

document.getElementById（ "myform"）。 E.PreventDefault（）; //デフォルトのアクションをキャンセルします var formelement = document.getElementById（ "myform"）; var data = new formdata（formelement）; fetch（ "http：// my-server/login"、{ 方法：「投稿」、 リダイレクト：「フォロー」、//リダイレクトを手動で処理する場合は、「マニュアル」に変更します ボディ：データ、 }） .then（（res）=> { if（res.redirected）{ window.location.href = res.url; //または、location.replace（res.url）; 戻る; } それ以外 { return res.text（）; } }） .then（（data）=> { document.getElementById（ "response"）。innerhtml = data; }） .catch（（error）=> { Console.Error（エラー）; }）; }）;

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);
    });
});

注：

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