フェッチ後のコール後にリダイレクト

Question

私は、アクセス管理（AM）サーバを使用してソーシャルログインページを作成しています。 ユーザーがログインボタンをクリックすると、AMサーバーにhttpポストコールをフェッチします。 AMサーバーは、ソーシャルログインページに認証Cookieを使用してHTTP 301リダイレクト応答を生成します。どういうわけかこのリダイレクトレスポンスに従って、新しいコンテンツをWebブラウザに表示する必要があります。

UI：ReactJS

要求：私はリダイレクト応答を追跡し、新しいコンテンツを表示するにはどうすればよい

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

：

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

応答

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 

は、コードに反応しますウェブでwser？

Answer 1

Request.redirectは"follow","error"または"manual"です。

それは "従う"、フェッチ（）APIの場合、リダイレクト応答（HTTP ステータスコード= 301,302,303,307,308）に従います。

「エラー」の場合、fetch（）APIはリダイレクト応答を というエラーとして処理します。

"手動"の場合、fetch（）APIはリダイレクトに従わず、 リダイレクト レスポンスをラップするopaque-redirectフィルタリングレスポンスを返します。

あなたはちょうど私が同様の問題を持っている

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

Answer 2

としてそれを使用するフェッチ後にリダイレクトしたいと私はそれがjQueryの内部アヤックスのためであるとして、内部フェッチリアクトのための答えが同じであることを信じているので、 - あなたはレスポンスがリダイレクトであることを検出することができれば、その後、例えば参照response.url

でwindow.location.hrefを更新：How to manage a redirect request after a jQuery Ajax call

注「はyの場合レスポンスがリダイレクトであることを検出することは難しいかもしれません。返信を取得するに「リダイレクト」フラグ（https://developer.mozilla.org/en-US/docs/Web/API/Responseを参照）が含まれていますが、Chromeではそうではないことがわかりました。また、Chromeではリダイレクトステータスではなくステータスレスポンスが200となっていますが、これはSSOの実装で可能性があります。 IEでpolyfillをフェッチする場合は、response.urlがインクルードされているかどうかを確認する必要があります。