redirect after a fetch post call redirect after a fetch post call reactjs reactjs

redirect after a fetch post call


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


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


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.