在 fetch post 调用后重定向

IT技术 redirect reactjs fetch
2021-04-07 06:41:11

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

用户界面：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

react代码：

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 浏览器中显示新内容？

4个回答

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

如果是“follow”，则 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);
    });
重定向的问题：“跟随”是我需要在浏览器中显示页面。所以我需要以某种方式重定向浏览器并显示新内容。
2021-05-22 06:41:11
上面设置了 cors 的代码不会自动重定向。但是我确实在 Chrome 版本 61.0.3163.100（官方版本）的网络选项卡中看到了新 URL。知道为什么浏览器不渲染它。
2021-05-23 06:41:11
- 重定向的问题：“跟随”是我需要在浏览器中显示页面。在这种情况下，我认为使用manual然后设置location.href甚至window.open使用返回响应的位置标头
2021-06-01 06:41:11
@BenKoshy 不，不是。@Luke T O'Brienmanual为服务工作者返回一个不透明的响应以重放响应。它是一个零字节，无法访问，基本上无法使用的响应。不是你想要的。error可能更有用
2021-06-12 06:41:11
error 也无用，因为它只抛出错误，但无法访问重定向响应
2021-06-19 06:41:11

查看Response 对象重定向的属性url ：Doc 说这是

“实验性的。预计未来的行为会改变”

Response 接口的 url 只读属性包含响应的 URL。url 属性的值将是任何重定向后获得的最终 URL。

在我的实验中，这个 'url' 属性与 Chrome (Version 75.0.3770.100 (Official Build) (64-bit)) 网络控制台中的 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 供应商很少关注这个功能的原因。另见这些讨论： 在 这里

似乎没有加载响应，我的 api 在评估帖子后提供了一些 flash 消息。
2021-05-25 06:41:11
为什么它会提出两个请求？
2021-05-28 06:41:11
我遵循了这种方法，但请记住，这会向response.url. 只需查看网络选项卡。
2021-06-18 06:41:11

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

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

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

我有一个类似的问题，我相信 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。

从 Chrome 版本 61.0.3163.100（官方版本）开始--> 它确实返回一个“重定向”标志和一个 url 和 200 状态并且尽管将“重定向”设置为“跟随”--> 它不会重定向自己，我需要使用 window.location
2021-05-27 06:41:11
window.location 将发出一个新请求，总共提供 2 个 @j10。知道什么是正确的方法，但这里的答案都不正确
2021-06-07 06:41:11
其它你可能感兴趣的问题
上一篇React Router 在重新加载时工作，但在单击链接时不工作 下一篇以编程方式更改 Redux-Form 字段值