Przekierowanie po wywołaniu pobierania

Question

Tworzę społeczną stronę logowania z serwerem dostępu (AM). Gdy użytkownik kliknie przycisk logowania, wykonuję pobieranie http post do serwera AM. Serwer AM generuje odpowiedź przekierowania HTTP 301 z ciasteczkami autoryzacji na stronę logowania społecznościowego. Muszę wykonać jakoś tę odpowiedź przekierowania i pokazać nową treść w przeglądarce.

Ui: ReactJS

Zapytanie:

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

Response

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 

React Kod:

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

Jak mogę śledzić odpowiedzi przekierowania i pokazać nową treść w sieci bro wser?

Answer 1

Request.redirect może być "follow", "error" lub "manual".

Jeśli jest "follow" fetch() API następuje przekierowanie odpowiedzi HTTP ( kodu status = 301,302,303,307,308).

Jeśli jest to "błąd", funkcja API fetch() traktuje odpowiedź przekierowania jako błąd .

Jeśli jest "ręczny", funkcja API fetch() nie wykonuje przekierowania i zwraca odpowiedź filtrowaną z nieprzezroczystym przekierowaniem, która opakowuje odpowiedź przekierowania .

Ponieważ chcesz przekierować po pobieraniu prostu użyć go jako

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

Answer 2

mam podobny problem i wierzę, że odpowiedź dla pobierania wewnątrz React jest taka sama jak dla AJAX wewnątrz JQuery - jeśli jesteś w stanie wykryć, że odpowiedź jest przekierowanie, a następnie zaktualizować window.location.href z response.url

patrz na przykład: How to manage a redirect request after a jQuery Ajax call

uwagą, że „jeżeli Y jesteś w stanie wykryć, że odpowiedź jest przekierowaniem "może być trudna część. Pobierz odpowiedzi może zawierać flagę przekierowania (zobacz https://developer.mozilla.org/en-US/docs/Web/API/Response), ale stwierdziłem, że tak nie jest w Chrome. Również w Chrome uzyskuję odpowiedź o statusie 200 zamiast statusu przekierowania - ale może to być coś z naszą implementacją SSO. Jeśli używasz polyfill pobrania z IE, musisz sprawdzić, czy plik response.url jest dołączony, czy nie.