Redirect 获取post调用后重定向

我正在使用访问管理（am）服务器创建一个社交登录页面。 当用户单击登录按钮时，我会对AM服务器进行一个获取http post调用。AM服务器生成一个HTTP 301重定向响应，并将身份验证cookie发送到社交登录页面。我需要遵循这个重定向响应，并在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浏览器中显示新内容？

可以是

“跟踪”

、

“错误”

或

“手动”

如果是“follow”，则fetch（）API将遵循重定向响应（HTTP 状态代码=30130230307308）

如果是“error”，fetch（）API将重定向响应视为 错误

如果是“手动”，fetch（）API不遵循重定向并返回 包装重定向的不透明重定向筛选响应 答复

因为您想在获取后重定向，所以只需将其用作

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

---

我有一个类似的问题，我相信fetch inside React的答案与ajax inside JQuery的答案是一样的——如果您能够检测到响应是重定向，那么就用response.url更新window.location.href

例如，见：

请注意，“如果您能够检测到响应是重定向”可能是一个棘手的部分。获取响应可能包含“重定向”标志（请参阅），但我发现Chrome中并非如此。我还发现，在Chrome中，我得到的是200状态响应，而不是重定向状态——但这可能与我们的SSO实现有关。如果在IE中使用fetch polyfill，则需要检查是否包含response.url。

查看response对象的属性： 医生说这是

“实验性。期待行为在未来发生变化”

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

在我的实验中，这个“url”属性与Chrome（版本75.0.3770.100（官方版本）（64位））网络控制台中位置头的值完全相同

处理重定向链接的代码如下所示：

   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同源脚本测试了它，该脚本具有从服务器获取面向AJAX调用的重定向302

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

---

不可能通过javascript重定向到新的HTML页面

fetch（url，{method:'POST'，重定向：“follow”}）；

---

只需对重定向位置执行另一个请求，该请求将作为数据返回，而不是由浏览器呈现。您可能希望能够使用

{redirect:“manual”}

，从响应中获取重定向位置，并使用Javascript导航到页面，但不幸的是，重定向位置没有返回，请参见。

您可以让

fetch

自动重定向，更改

fetch（url，{method:'POST'}）

to

fetch（url，{method:'POST'，redirect:'follow'}）

redirect:'follow'的问题是我需要在浏览器中显示页面。因此，我需要以某种方式重定向浏览器并显示新内容。上面带有cors集的代码不会自动重定向。但我确实在Chrome 61.0.3163.100版（官方版本）的网络选项卡中看到了新的URL。你知道为什么浏览器没有呈现它吗？如何使用axios实现同样的效果？重定向的问题是：“follow”需要在浏览器中显示页面。在这种情况下，我认为使用

手动

，然后设置

位置.href

甚至

窗口。使用Chrome版本61.0.3163.100（官方版本）返回的响应中的-->它不会重定向自身，我需要使用window.locationwindow.location发出新请求，总共给出2@j10。idk什么是正确的方法，但这里没有一个答案是正确的，似乎没有加载响应，我的api在评估帖子后提供了一些flash消息。我遵循了这种方法，但请记住，这会对
response.url
发出两个单独的请求。只需查看网络选项卡。