web-dev-qa-db-ja.com

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

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

UI：ReactJS

要求：

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

反応コード：

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

リダイレクトレスポンスをフォローして、Webブラウザに新しいコンテンツを表示するにはどうすればよいですか？

redirectreactjsfetch
19
zappee

Request.redirectは"follow"、"error"または"manual"。

「フォロー」の場合、fetch（）APIはリダイレクト応答に従います（HTTPステータスコード= 301,302,303,307,308）。

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

「手動」の場合、fetch（）APIはリダイレクトを追跡せず、リダイレクト応答をラップする不透明リダイレクトフィルタリング応答を返します。

フェッチ後にリダイレクトしたいので、それを次のように使用します

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

私は同様の問題を抱えており、フェッチ内部のReactはJQuery内部のajaxの場合と同じです-応答がリダイレクトであることを検出できる場合は更新しますresponse.urlを含むwindow.location.href

例： jQuery Ajax呼び出し後のリダイレクトリクエストの管理方法

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

3
vanappears

Responseオブジェクトのプロパティ rlredirected を見てください：これは

「実験的。将来的に変化する行動を期待する」

Responseインターフェースのurl読み取り専用プロパティには、応答のURLが含まれています。 urlプロパティの値は、リダイレクト後に取得される最終URLになります。

私の実験では、この「url」プロパティはChrome（バージョン75.0.3770.100（公式ビルド）（64ビット））ネットワークコンソールのLocationヘッダーの値とまったく同じでした。

リンクのリダイレクトを処理するコードは次のようになります。

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

Fetch。AJAXサーバーからリダイレクト302に直面している呼び出し）を使用して、react.jsの同じ元のスクリプトで動作することをテストしました。

P.S。SPAアプリでは、リダイレクト応答はほとんどありません。おそらく、これがajaxベンダーがこの機能にほとんど注意を払わない理由です。これらの議論も参照してください： herehere

0
Andreas Gelever