获取后调用后重定向

Question

我正在创建一个带有访问管理(AM)服务器的社交登录页面.当用户单击登录按钮时,我会对AM服务器进行提取http调用.AM服务器生成带有auth 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浏览器中显示新内容？

Answer 1

无法使用 JavaScript 重定向到新的 HTML 页面。

fetch(url, { method: 'POST', redirect: "follow" });

将简单地对重定向位置执行另一个请求，该请求将作为数据返回，而不是由浏览器呈现。您可能期望能够使用{ redirect : "manual" }，从响应中获取重定向位置并使用 Javascript 导航到页面，但不幸的是，未返回重定向位置，请参阅https://github.com/whatwg/fetch/issues/763。

Answer 2

Request.redirect可以是"follow","error"或"manual".

如果是"follow",则fetch()API遵循重定向响应(HTTP状态代码= 301,302,303,307,308).

如果是"error",则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 3

我有一个类似的问题，我相信 React 中 fetch 的答案与 JQuery 中 ajax 的答案相同 - 如果您能够检测到响应是重定向，则使用响应更新 window.location.href .url

例如，请参阅：如何在 jQuery Ajax 调用后管理重定向请求

请注意，“如果您能够检测到响应是重定向”可能是棘手的部分。获取响应可能包含“重定向”标志（请参阅https://developer.mozilla.org/en-US/docs/Web/API/Response），但我发现 Chrome 中并非如此。我还发现在 Chrome 中我收到了 200 状态响应，而不是重定向状态 - 但这可能与我们的 SSO 实现有关。如果您在 IE 中使用 fetch polyfill，那么您需要检查response.url 是否包含在内。

Answer 4

看一下响应对象重定向的属性URL ：Doc说这是

“实验性的。希望将来的行为会改变”

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

我测试了它与react.js同源脚本的配合使用，并从服务器获取面向重定向302的AJAX调用。

PS在SPA应用程序中，不太可能进行重定向响应，这也许就是ajax供应商对该功能很少关注的原因。又见这些讨论： 这里 这里