在 fetch post 调用后重定向 [英] redirect after a fetch post call

问题描述

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

I am creating an social login page with an Access Management (AM) server. When user click on the login button then I make a fetch http post call to AM server. AM server generates a HTTP 301 redirect response with auth cookies to the social login page. I need to follow somehow this redirect response and show the new content in the web browser.

界面: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);
        });
}

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

How I can follow the redirect response and show the new content in the web browser?

推荐答案

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

如果是follow"，fetch() API 跟随重定向响应(HTTP状态码 = 301,302,303,307,308).

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

如果是错误"，fetch() API 会将重定向响应视为错误.

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

如果是手动"，fetch() API 不跟随重定向并返回包装重定向的不透明重定向过滤响应回应.

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

由于您想在获取后重定向，因此只需将其用作

Since you want to redirect after a fetch just use it as

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

这篇关于在 fetch post 调用后重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！