Question

I have a simple PHP page (for testing) that simply calls header("Location: http://www.example.com");exit;, which resides on the same server, in the same directory as another file with the following jQuery Javascript:

$(document).ready(function() {
    jQuery.ajax({
        type : 'GET',
        url : 'bounce.php',
        error : function(xhr, status, error) {
            console.log("ERROR: ", xhr, xhr.status, xhr.getAllResponseHeaders());
        },
        complete : function(xhr, status) {
            // Get headers of the response
            console.log("COMPLETE: ", xhr, xhr.status, xhr.getAllResponseHeaders());
        }
    });
});

I was expecting (from several other StackOverflow responses) for the xhr.status to return “302”, but instead the AJAX call is triggering the “error” event (and then the “complete” event), and xhr.status is returning 0 (zero), and .getAllResponseHeaders() is coming back null (in both the error, and complete functions).

Firebug is showing the “302 Moved Temporarily”, and the response headers. So why is this triggering the error event, and not passing along the proper 302 code, and headers? Is this something to do with the Same Origin since the bouncing script and the fetching script are both on the same server? Is this jQuery or Javascript’s fault?

Answer 1

I think the error is related to the browser security error. If you are not familiar with this, then you should know that using XMLHttpRequest you can only access files on the same server. So redirecting to example.com will result in an error because you are probably not on example.com.