web-dev-qa-db-fra.com

rediriger après un appel fetch post

Je crée une page de connexion sociale avec un serveur Access Management (AM). Lorsque l'utilisateur clique sur le bouton de connexion, je passe un appel http fetch au serveur AM. Le serveur AM génère une réponse de redirection HTTP 301 avec des cookies d'authentification vers la page de connexion sociale. Je dois en quelque sorte suivre cette réponse de redirection et afficher le nouveau contenu dans le navigateur Web.

UI: ReactJS

Demande:

POST /api/auth/socialauth/initiate HTTP/1.1
Host    example.com
User-Agent  Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:49.0)
Accept  */*
Accept-Language en-US,en;q=0.5
Accept-Encoding gzip, deflate
Origin  http://web.example.com:8080
Referer http://web.example.com:8080/myapp/login
Cookie  authId=...; NTID=...

Réponse

HTTP/1.1 307 Temporary Redirect
https://www.facebook.com/dialog/oauth?client_id=...&scope=public_profile%2Cemail&redirect_uri=http%3A%2F%2Fam.example.com%3A8083%2Fopenam%2Foauth2c%2FOAuthProxy.jsp&response_type=code&state=qtrwtidnwdpbft4ctj2e9mv3mjkifqo

Code de réaction:

initiateSocialLogin() {
    var url = "/api/auth/socialauth/initiate";

    fetch(url, { method: 'POST' })
        .then(response => {
            // HTTP 301 response
            // HOW CAN I FOLLOW THE HTTP REDIRECT RESPONSE?
        })
        .catch(function(err) {
            console.info(err + " url: " + url);
        });
}

Comment puis-je suivre la réponse de redirection et afficher le nouveau contenu dans le navigateur Web?

redirectreactjsfetch
19
zappee

Request.redirect pourrait être "follow", "error" ou "manual".

S'il s'agit de "suivre", l'API fetch () suit la réponse de redirection (code d'état HTTP = 301 302 303 307 308).

S'il s'agit d'une "erreur", l'API fetch () traite la réponse de redirection comme une erreur.

Si elle est "manuelle", l'API fetch () ne suit pas la redirection et renvoie une réponse filtrée opaque-redirection qui enveloppe la réponse de redirection.

Puisque vous voulez rediriger après une extraction, utilisez-le simplement comme

fetch(url, { method: 'POST', redirect: 'follow'})
    .then(response => {
        // HTTP 301 response
    })
    .catch(function(err) {
        console.info(err + " url: " + url);
    });
14
Shubham Khatri

J'ai un problème similaire et je crois que la réponse pour aller chercher à l'intérieur React est la même que pour ajax dans JQuery - si vous pouvez détecter que la réponse est une redirection, puis mettez à jour le window.location.href avec le response.url

Voir par exemple: Comment gérer une demande de redirection après un appel jQuery Ajax

Notez que "si vous pouvez détecter que la réponse est une redirection" peut être la partie la plus délicate. Les réponses de récupération peuvent contenir un indicateur 'redirigé' (voir https://developer.mozilla.org/en-US/docs/Web/API/Response ) mais j'ai trouvé que ce n'était pas le cas dans Chrome. Je trouve également dans Chrome j'obtiens une réponse d'état 200 plutôt qu'un état de redirection - mais cela pourrait être quelque chose avec notre implémentation SSO. Si vous utilisez un polyfill fetch avec IE alors vous devrez vérifier si response.url est inclus ou non.

3
vanappears

Jetez un oeil aux propriétés rlredirigé de l'objet Response: Doc dit que c'est

"Expérimental. Attendez-vous à ce que le comportement change à l'avenir"

La propriété en lecture seule url de l'interface Response contient l'URL de la réponse. La valeur de la propriété url sera l'URL finale obtenue après toute redirection.

Dans mes expériences, cette propriété 'url' était exactement la même que la valeur de l'en-tête Location dans Chrome (Version 75.0.3770.100 (Version officielle) (64 bits)) Console réseau.

Le code pour gérer la redirection du lien ressemble à ceci:

   fetch(url, { method: 'POST' })
    .then(response => {
        // HTTP 301 response
        // HOW CAN I FOLLOW THE HTTP REDIRECT RESPONSE?
        if (response.redirected) {
            window.location.href = response.url;
        }
    })
    .catch(function(err) {
        console.info(err + " url: " + url);
    });

Je l'ai testé en travaillant avec le script same-Origin react.js avec fetch AJAX face à l'appel redirige 302 depuis le serveur.

P.S. Dans les applications SPA, les réponses de redirection sont peu probables, c'est peut-être la raison pour laquelle les fournisseurs ajax accordent peu d'attention à cette fonctionnalité. Voir aussi ces discussions: iciici

0
Andreas Gelever