最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to redirect the user to a different page when using fetch and await? - Stack Overflow

programmeradmin5浏览0评论

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.

Share Improve this question edited Feb 2, 2019 at 9:54 Shailesh Iyer asked Dec 27, 2018 at 12:50 Shailesh IyerShailesh Iyer 611 gold badge1 silver badge3 bronze badges 6
  • 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
 |  Show 1 more ment

2 Answers 2

Reset to default 1

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;
          });
发布评论

评论列表(0)

  1. 暂无评论