Comment gérer les redirections après la connexion avec l'API JavaScript Fetch ?

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

Lors de l'utilisation de la fonction fetch() pour effectuer une requête POST à ​​un serveur qui répond avec une RedirectResponse, la redirection sera automatiquement suivie 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 fetch() suivra cette redirection en coulisses et renverra la réponse de l'URL de redirection.

Pour surmonter ce problème, vous pouvez vérifier si la réponse est le résultat d'une demande que vous avez faite et qui a été redirigée. Si tel est le cas, vous pouvez récupérer la propriété url de la réponse, qui renverra l'URL finale obtenue **après** toute redirection, et en utilisant window.location.href de JavaScript, vous pouvez rediriger l'utilisateur vers l'URL cible (c'est-à-dire l'URL cible). page de redirection). Au lieu de window.location.href, on peut également utiliser window.location.replace(). La différence avec la définition de la valeur de la propriété href est que lors de l'utilisation de 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 l'URL précédente. pour y accéder.

Exemple de code :

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

Remarque : Si vous utilisez une demande d'origine croisée, vous Vous devez définir l’en-tête de réponse Access-Control-Expose-Headers côté serveur pour inclure l’en-tête Location. En effet, seuls les en-têtes de réponse CORS-safelist sont exposés par défaut.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!