Ajax call does not redirect based on Redirect 302 of webapi

Question

I have a c# webapi application where the endpoint just redirects, however, when I call from an HTML page that has an AJAX call, it does not redirect, could you please help me where I'm missing? I tried all combinations.

 [HttpPost]
        [Route("Redirect")]
        public async Task<IActionResult> Redirect()
        {
            var response = "https://google.com";
            return Redirect(response);
        }

AJAX call

$.ajax({
   url: "https://10.10.45.2/api/Redirect", 
   type: "POST",
   dataType: "json",
 contentType: "application/json; charset=utf-8",
 success: function(data, textStatus, xhr) {
        window.location = xhr.location;   // I know this is not correct
    },
    complete: function(xhr, textStatus) {
        console.log("Complete: " + xhr.status);
    }, 
    error: function (jqXHR, timeout, message) {
        console.log("Complete: " + jqXHR.status);
        console.log("Response Location :" + loginPageRedirectHeader);
    }
});

Look at this 2 posts: https://stackoverflow.com/a/6611964/6895130 , https://stackoverflow.com/a/9739212/6895130 — Dmyto Holota, Sep 19 '22 at 17:54
jQUery's `.ajax()` is just a wrapper for sending/receiving web requests, it doesn't do anything with the response itself. You have to include logic in the `complete` function to do what you want to do with the response. — Daevin, Sep 19 '22 at 17:55
@Mysterious288 then include what you've actually tried in the question, because writing the response status code to the console won't redirect your page. Look at Jason Pan's answer for the proper way to do it. — Daevin, Sep 20 '22 at 13:04

score 0 · Answer 1 · answered Sep 20 '22 at 07:12

In short, when ajax sends a request, the data you get should be the json type you agreed on. Redirect will not send matching data back, so your code is wrong and cannot achieve this requirement.

Ajax is used to send http requests, and the sending method and receiving format need to be defined by themselves. In your scenario, it is recommended to use window.location to jump after receiving data in text or json format.

The correct ways for you.

Use <a></a> tag navigate to new page.

<a href="/api/Redirect">Navigate to Google</a>

[HttpPost]
[Route("Redirect")]
public async Task<IActionResult> Redirect()
{
    var response = "https://google.com";
    return Redirect(response);
}

Get google url from controller.

[HttpPost]
[Route("Redirect")]
public string Redirect()
{
    var response = "https://google.com";
    return response;
}

$.ajax({
    url: "https://10.10.45.2/api/Redirect", 
    type: "POST",
    dataType: "text",
    success: function(data) {
        window.location = data;
    },
    error: function (jqXHR, timeout, message) {
    }
});

I had the same view and have implemented it, however, I have a requirement where the server will just 302 status code and the client will be redirected automatically, any thoughts on that ?? — Mysterious288, Sep 20 '22 at 17:01

Ajax call does not redirect based on Redirect 302 of webapi

1 Answers1

The correct ways for you.