在 fetch post 调用后重定向

Question

我正在使用访问管理 (AM) 服务器创建社交登录页面。当用户单击登录按钮时，我会向 AM 服务器发送一个获取 http post 的调用。 AM 服务器生成带有身份验证 cookie 的 HTTP 301 重定向响应到社交登录页面。我需要以某种方式遵循此重定向响应并在网络浏览器中显示新内容。

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

如何跟随重定向响应并在网络浏览器中显示新内容？

Answer 1

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

If it is "follow", fetch() API follows the redirect response (HTTP status code = 301,302,303,307,308).

If it is "error", fetch() API treats the redirect response as an error.

If it is "manual", fetch() API doesn't follow the redirect and returns an opaque-redirect filtered response which wraps the redirect response.

因为你想在抓取后重定向就用它作为

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

Answer 2

我有一个类似的问题，我相信 React 内部的 fetch 答案与 JQuery 内部的 ajax 的答案是一样的——如果你能够检测到响应是重定向，然后用 response.url

更新 window.location.href

参见示例：How to manage a redirect request after a jQuery Ajax call

请注意，'if you are able to detect that the response is a redirect' 可能是棘手的部分。获取响应可能包含 'redirected' 标志（参见 https://developer.mozilla.org/en-US/docs/Web/API/Response），但我发现 Chrome 中并非如此。我还在 Chrome 中找到了 200 状态响应而不是重定向状态 - 但这可能与我们的 SSO 实现有关。如果您在 IE 中使用 fetch polyfill，那么您需要检查是否包含 response.url。

Answer 3

查看响应 object 的属性 url redirected：医生说这是

"Experimental. Expect behavior to change in the future"

The url read-only property of the Response interface contains the URL of the response. The value of the url property will be the final URL obtained after any redirects.

在我的实验中，这个 'url' 属性与 Chrome 中 Location header 的值完全相同（版本 75.0.3770.100（官方构建）（ 64 位)) 网络控制台。

处理重定向的代码link我的样子是这样的：

   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 same-origin 脚本一起使用，从服务器获取 AJAX 面向重定向 302 的调用。

P.S. 在 SPA 应用程序中，重定向响应不太可能，这可能是 ajax 供应商很少关注此功能的原因。另见这些讨论： here here

Answer 4

无法通过 javascript 重定向到新的 HTML 页面。

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

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

在 fetch post 调用后重定向

redirect after a fetch post call

redirect

fetch

reactjs