Django says is_ajax is false on a JQuery AJAX request

Question

Context: a chrome browser extension uses JQuery to request a response from a remote django app. Django recognizes that the request is made via AJAX and responds with "Hello AJAX!". I'm basing my exercise off this great example. Because this request is being made from a chrome extension, the request is being made cross site, so I've used the @CSRF_exempt decorator on my Django view.

Problem: My Django view is not recognizing the request as an AJAX request, and instead of responding Hello AJAX! it responds Hello not AJAX!.

My Django view:
(The url /xhr_test uses the following view)

@csrf_exempt
def check_login_extension(request):
    if request.is_ajax():
        message = "Hello AJAX!"
    else:
        message = "Hello not AJAX"
    return HttpResponse(message)

My JQuery request:

function xhrconnect() {
    $.get("http://localhost:8000/xhr_test", function(data) {
      document.getElementById('xhrmsg').innerHTML = (data);
    });
}

Answer 1

Going through the jQuery source, it looks like $.ajax() (and therefore $.get(), $.post(), etc) will automatically set the crossDomain option to true if it sees that you're making a cross-domain request, which you are (relevant code here). And in the actual AJAX request, jQuery won't set the HTTP_X_REQUESTED_WITH header that Django needs for is_ajax() if crossDomain is set (relevant code here).

I think the easiest way to fix this is to explicitly set crossDomain to false:

function xhrconnect() {
    $.ajax({
        url: "http://localhost:8000/xhr_test", 
        success: function(data) {
            document.getElementById('xhrmsg').innerHTML = (data);
        },
        crossDomain: false
    });
}

If that doesn't work, you could try using an AJAX prefilter function to manually set the HTTP_X_REQUESTED_WITH header on the request.

Answer 2

You may also want to take a look at this page. Because Django provides some protection against cross-site request forgeries (CSRF), it requires some special AJAX setup. I've included the AJAX setup below:

$(document).ajaxSend(function(event, xhr, settings) {
    function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
        var cookie = jQuery.trim(cookies[i]);
        // Does this cookie string begin with the name we want?
        if (cookie.substring(0, name.length + 1) == (name + '=')) {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
            break;
        }
        }
    }
    return cookieValue;
    }
    function sameOrigin(url) {
    // url could be relative or scheme relative or absolute
    var host = document.location.host; // host + port
    var protocol = document.location.protocol;
    var sr_origin = '//' + host;
    var origin = protocol + sr_origin;
    // Allow absolute or scheme relative URLs to same origin
    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
        (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
        // or any other URL that isn't scheme relative or absolute i.e relative.
        !(/^(\/\/|http:|https:).*/.test(url));
    }
    function safeMethod(method) {
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
    xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
    }
});