Detecting a redirect in ajax request?

JqueryAjaxHttp

Jquery Problem Overview


I want to use jQuery to GET a URL and explicitly check if it responded with a 302 redirect, but not follow the redirect.

jQuery's $.ajax appears to always follow redirects. How can I prevent this, and see the redirect without following it?

There are various questions with titles like "jquery ajax redirect" but they all appear to involve accomplishing some other goal, rather than just directly checking the status that a server gives.

Jquery Solutions


Solution 1 - Jquery

The AJAX request never has the opportunity to NOT follow the redirect (i.e., it must follow the redirect). More information can be found in this answer https://stackoverflow.com/a/2573589/965648

Solution 2 - Jquery

Welcome to the future!

Right now we have a "responseURL" property from xhr object. YAY!

See https://stackoverflow.com/questions/8056277/how-to-get-response-url-in-xmlhttprequest

However, jQuery (at least 1.7.1) doesn't give an access to XMLHttpRequest object directly. You can use something like this:

var xhr;
var _orgAjax = jQuery.ajaxSettings.xhr;
jQuery.ajaxSettings.xhr = function () {
  xhr = _orgAjax();
  return xhr;
};

jQuery.ajax('http://test.com', {
  success: function(responseText) {
    console.log('responseURL:', xhr.responseURL, 'responseText:', responseText);
  }
});

It's not a clean solution and i suppose jQuery team will make something for responseURL in the future releases.

TIP: just compare original URL with responseUrl. If it's equal then no redirect was given. If it's "undefined" then responseUrl is probably not supported. However as Nick Garvey said, AJAX request never has the opportunity to NOT follow the redirect but you may resolve a number of tasks by using responseUrl property.

Solution 3 - Jquery

While the other folks who answered this question are (sadly) correct that this information is hidden from us by the browser, I thought I'd post a workaround I came up with:

I configured my server app to set a custom response header (X-Response-Url) containing the url that was requested. Whenever my ajax code receives a response, it checks if xhr.getResponseHeader("x-response-url") is defined, in which case it compares it to the url that it originally requested via $.ajax(). If the strings differ, I know there was a redirect, and additionally, what url we actually arrived at.

This does have the drawback of requiring some server-side help, and also may break down if the url gets munged (due to quoting/encoding issues etc) during the round trip... but for 99% of cases, this seems to get the job done.


On the server side, my specific case was a python application using the Pyramid web framework, and I used the following snippet:

import pyramid.events

@pyramid.events.subscriber(pyramid.events.NewResponse)
def set_response_header(event):
    request = event.request
    if request.is_xhr:
        event.response.headers['X-Response-URL'] = request.url

Solution 4 - Jquery

You can now use fetch API/ It returns redirected: *boolean*

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionkdtView Question on Stackoverflow
Solution 1 - JqueryNick GarveyView Answer on Stackoverflow
Solution 2 - JqueryRiki_tiki_taviView Answer on Stackoverflow
Solution 3 - JqueryEli CollinsView Answer on Stackoverflow
Solution 4 - JqueryfvrabView Answer on Stackoverflow