How to redirect the user to a different page when using fetch and await?

user_10564496 0
Viewed 8151

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.

ecmascript-6 fetch javascript
2 Answers
user_44501870

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

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