cómo redirigir al usuario a otra página después de iniciar sesión usando JavaScript Fetch API?

cuando se usa la función Fetch () para realizar una solicitud de publicación a un servidor que responde Con una redirectionPonse, la redirección se seguirá automáticamente en el lado del cliente. Esto se debe a que el modo de redirección seguirá de forma predeterminada en la función Fetch (). Como resultado, el usuario no será redirigido a la nueva URL, sino que buscará () seguirá esa redirección detrás de escena y devolverá la respuesta de la URL de redirección.

para superar esto, puede verificar si La respuesta es el resultado de una solicitud que realizó que fue redirigida. Si es así, puede recuperar la propiedad de URL de la respuesta, que devolverá la URL final obtenida ** Después de ** cualquier redirección y utilizando la ventana de JavaScript.location.href, puede redirigir al usuario a la URL de destino (es decir, el Página de redirección). En lugar de window.location.href, también se puede usar window.location.replace (). La diferencia al establecer el valor de la propiedad HREF es que cuando se usa el método de ubicación. botón para navegar a él.

Código de ejemplo:

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

nota: Si está utilizando una solicitud de origen cruzado, deberá establecer el encabezado de respuesta de encabezados de exposición de acceso de acceso en el lado del servidor para incluir la ubicación encabezamiento. Esto se debe a que solo los encabezados de respuesta seguidos de Cors están expuestos de forma predeterminada.