redirect after a fetch post call

Question

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.

UI: ReactJS

Request:

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=...

Response

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 code:

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?

Answer 1

Request.redirect could be "follow", "error" or "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.

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

Answer 2

Have a look at properties url redirected of Response object: Doc says that this is

"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.

In my experiments, this 'url' property was exactly the same as the value of Location header in Chrome (Version 75.0.3770.100 (Official Build) (64-bit)) Network console.

The code to deal with redirecting link my look like this:

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

I tested it working with react.js same-origin script with fetch AJAX call facing redirects 302 from server.

P.S. In SPA apps, redirect responses are unlikely, maybe this is the reason why ajax vendors apply little attention to this functionality. See also these discussions: here here

Answer 3

It is not possible to follow a redirect to a new HTML page with javascript.

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

will simply perform another request to the redirected location which will be returned as data and not rendered by the browser. You might expect to be able to use { redirect : "manual" }, get the redirected location from the response and navigate to the page with Javascript, but unfortunately the redirected location is not returned, see https://github.com/whatwg/fetch/issues/763.

Answer 4

I have a similar issue and I believe that the answer for fetch inside React is the same as it is for ajax inside JQuery - if you are able to detect that the response is a redirect, then update the window.location.href with the response.url

See for example: How to manage a redirect request after a jQuery Ajax call

Note that 'if you are able to detect that the response is a redirect' might be the tricky part. Fetch responses may contain a 'redirected' flag (see https://developer.mozilla.org/en-US/docs/Web/API/Response) but I've found that is not the case in Chrome. I also find in Chrome I get a 200 status response rather than a redirect status - but that could be something with our SSO implementation. If you are using a fetch polyfill with IE then you'll need to check whether response.url is included or not.

Answer 5

My solution for this scenario was sent the url I want to be redirected as a parameter and then receiving it in body response, instead of using redirect from server

Answer 6

I tried using fetch to redirect to the url but this method didn't work, so I ended up using a different method to get the redirect to work. Inside your react component follow the following steps:

• Step 1: create a state variable:

const [_id,setID]=useState('')

• Step 2: create a method that updates the state:

function uidValue(event) {
        const endpoint = '/api/users/'+ event.target.value // this will be your url, so set it right.
        setID(endpoint)
    }

• Step 3: in the return section of your component add an onChange listener to the username(id in my case):

<input id="uid" type="text" name=":_id" placeholder=":_id" onChange={uidValue} />

• Step 4: make sure all your inputs are inside a form, and add an action attribute to the form tag that sets the URL you want it to navigate to using your state:

<form  action={_id} id="login info" method="post" >

Answer 7

To make redirect work on fetch, this is how I do:

fetch(url, {redirect:'manual'})
.then(response => {
  if (response.type == "opaqueredirect"){  
  // To make sure the fetch is with redirect response return.  
    window.location.replace('.../redirectURL/'); // create one and only one request
    return;
  }
  ...
}

Another way to do it is as follows. However, this method would create two requests to the redirected url. The first request won't change the content. Only would the second request do.

fetch(url, {redirect:'follow'}) // 'follow' creates the first request
.then(response => {
  if (response.redirected) {
    window.location.replace(response.url); 
  // creates the second request, and change the content
    return;
  }
  ...
}

https://javascript.info/fetch-api#redirect

Answer 8

Use the "redirected" property inside the incoming data, then manually redirect(you need to send a 302 status code from the server first):

  await fetch('http://localhost:3333/signup', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    credentials: 'include',
    body: data,
  })
    .then(data => data.redirected && (document.location.href = '/foro'))
    .catch(err => console.error(err));
});

Answer 9

Fetch is not able to get the redirect URL, but XMLHttpRequest can.

if you want to get the redirect URL, you can try this code:

const xhr = new XMLHttpRequest();

xhr.open("GET", "/api/auth/socialauth/initiate");

xhr.send();

xhr.onreadystatechange = function () {
  if (this.readyState === this.DONE) {
    console.log(this.responseUR);
    this.abort();
  }
};