Comment rediriger l'utilisateur vers une autre page après la connexion à l'aide de JavaScript Fetch API?

Lorsque vous utilisez la fonction fetch () pour effectuer une demande de message à un serveur qui répond Avec une redirection, la redirection sera automatiquement suivie du côté client. En effet, le mode de redirection est défini pour suivre par défaut dans la fonction fetch (). En conséquence, l'utilisateur ne sera pas redirigé vers la nouvelle URL, mais plutôt fetch () suivra cette redirection dans les coulisses et renverra la réponse de l'URL de redirection.

pour surmonter cela, vous pouvez vérifier si La réponse est le résultat d'une demande que vous avez faite, ce qui a été redirigé. Si c'est le cas, vous pouvez récupérer la propriété URL de la réponse, qui renverra l'URL finale obtenue ** après ** Tous les redirections, et en utilisant la fenêtre de JavaScript.Location.href, vous pouvez rediriger l'utilisateur vers l'URL cible (c'est-à-dire le Page de redirection). Au lieu de Window.Location.href, on peut également utiliser Window.Location.replace (). La différence entre la définition de la valeur de la propriété HREF est que lorsque vous utilisez la méthode Location.replace (), après avoir accédé à l'URL donnée, la page actuelle ne sera pas enregistrée dans l'historique de la session - ce qui signifie que l'utilisateur ne pourra pas utiliser le dos bouton pour y parcourir.

Exemple de code:

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

Remarque: Si vous utilisez une demande d'origine transversale, vous devrez définir l'accès à l'en-tête de réponse des chefs d'accès-exposition du côté serveur pour inclure l'emplacement pour inclure l'emplacement pour inclure l'emplacement en-tête. En effet