我正在创建一个带有Access Management(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);
});
}
如何关注重定向响应并在网络浏览器中显示新内容?
答案 0 :(得分:12)
Request.redirect可以是"follow"
,"error"
或"manual"
。
如果是"请按照",fetch()API遵循重定向响应(HTTP 状态代码= 301,302,303,307,308)。
如果是"错误",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);
});
答案 1 :(得分:3)
无法使用 javascript 重定向到新的 HTML 页面。
fetch(url, { method: 'POST', redirect: "follow" });
将简单地向重定向位置执行另一个请求,该请求将作为数据返回,而不是由浏览器呈现。您可能希望能够使用 { redirect : "manual" }
,从响应中获取重定向位置并使用 Javascript 导航到页面,但遗憾的是未返回重定向位置,请参阅 https://github.com/whatwg/fetch/issues/763。
答案 2 :(得分:2)
我有类似的问题,我相信React内部的fetch与JQuery中的ajax相同 - 如果你能够检测到响应是重定向,那么更新window.location.href与response.url
例如参见:How to manage a redirect request after a jQuery Ajax call
请注意,“如果您能够检测到响应是重定向”可能是棘手的部分。获取回复可能包含“重定向”标记(请参阅https://developer.mozilla.org/en-US/docs/Web/API/Response),但我发现在Chrome中并非如此。我也发现在Chrome中我获得了200状态响应而不是重定向状态 - 但这可能与我们的SSO实现有关。如果您正在使用带有IE的fetch polyfill,那么您需要检查是否包含response.url。
答案 3 :(得分:0)
看看响应对象的属性url redirected: Doc说这是
“实验性的。希望将来的行为会改变”
Response接口的url只读属性包含URL 回应。 url属性的值将是最终URL 在进行任何重定向后获得。
在我的实验中,此“ url”属性与Chrome(版本75.0.3770.100(正式版本)(64位))网络控制台中的Location标头值完全相同。
用于处理重定向的代码链接如下:
ToString
我测试了它是否与react.js同源脚本一起使用,并通过AJAX调用面对来自服务器的重定向302。
PS 。在SPA应用程序中,不太可能进行重定向响应,这也许就是ajax供应商对该功能很少关注的原因。 另请参阅以下讨论: here here