I have been trying to redirect the user to a different page after a POST call to my site api with fetch and await. I am receiving a response which says GET localhost:10004/ page. Usually in $.ajax or xmlHTTPRequest it redirects automatically but when using the new fetch and await syntax it fails to redirect automatically.

Here is my code.

I have already tried using redirect = "follow" it does not redirect after that.

fetch('http://localhost:10004/api', {
            method: 'POST', // or 'PUT'
            body: JSON.stringify(obj), 
            headers: {
                'Content-Type': 'application/json'
            },
           redirect: 'follow'
        })
        .then(response => {
            //what to write here to redirect the user
        }).catch(error => {
            console.error('Error:', error);

   });

EDIT:1 Changed the key redirected to redirect. I would like to clarify that i wanted to achieve the redirect without the window.location methods like window.location.replace or window.location.href .So after a month or so with grappling with the issue. I think I have cornered the issue so when using the fetch api. The browser does send another request to server to the redirected location from the client side.But the interesting part is it is not a document request it is a fetch request which the browser assumes it does not have to render and is asynchronous the client side then receives the html output but the browser refuses to render the page in the window.

I have been trying to redirect the user to a different page after a POST call to my site api with fetch and await. I am receiving a response which says GET localhost:10004/ page. Usually in $.ajax or xmlHTTPRequest it redirects automatically but when using the new fetch and await syntax it fails to redirect automatically.

Here is my code.

I have already tried using redirect = "follow" it does not redirect after that.

fetch('http://localhost:10004/api', {
            method: 'POST', // or 'PUT'
            body: JSON.stringify(obj), 
            headers: {
                'Content-Type': 'application/json'
            },
           redirect: 'follow'
        })
        .then(response => {
            //what to write here to redirect the user
        }).catch(error => {
            console.error('Error:', error);

   });

EDIT:1 Changed the key redirected to redirect. I would like to clarify that i wanted to achieve the redirect without the window.location methods like window.location.replace or window.location.href .So after a month or so with grappling with the issue. I think I have cornered the issue so when using the fetch api. The browser does send another request to server to the redirected location from the client side.But the interesting part is it is not a document request it is a fetch request which the browser assumes it does not have to render and is asynchronous the client side then receives the html output but the browser refuses to render the page in the window.

• javascript
• ecmascript-6
• fetch

• window.location or window.open – Shilly Commented Dec 27, 2018 at 12:56
• 1 The option name is redirect not redirected. Why do you need to do a redirect in the request anyway? – charlietfl Commented Dec 27, 2018 at 13:00
• 1 Do you want to a) redirect the POST request on the server and fetch to follow it or b) redirect to another page on the client, after a successful fetch POST? It sounds like a) from your claim that $.ajax does this automatically, but your title and question text suggest b) – user5734311 Commented Dec 27, 2018 at 13:04
• Why are you using AJAX at all if you just want to redirect the user? – Bergi Commented Dec 27, 2018 at 13:17
• 1 I need to first process the data sent by the user and then redirect the user to a specific page on the website.I dont want to expose the redirect location on the client side. – Shailesh Iyer Commented Dec 27, 2018 at 20:37

2 Answers 2

you can achieve your redirect by setting window.location Object:

window.location.href = "https://www.google."

https://developer.mozilla/en-US/docs/Web/API/Window/location

In your example you are using only single then but it should be two like below.

    fetch('https://httpbin/post', { method: 'POST', body: 'a=1' })
        .then(res => res.json()) // expecting a json response
        .then(json => {
           console.log(json)
           window.location.href = data.redirect;
          });