Django ajax POST extend beforeSend method used for CSRF protection

Question

I do need to make same ajax POST calls in Django. So I use the method described in Django docs:

function csrfSafeMethod(method) {
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    crossDomain: false, 
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type)) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

However, when I make ajax calls and want to add some action for beforeSend method (i.e. display loader image), it removes the above function. Example:

$.ajax({
    url: "some_url",
    type: "POST",
    data: some_form.serialize(),
    beforeSend: function() { some_element.showLoader();}
});
$.ajax({
    url: "some_other_url",
    type: "POST",
    data: some_other_form.serialize(),
    beforeSend: function() { some_other_element.showLoader();}
});

DRY is important and I don't want to put the "showLoader()" function in ajaxSetup, cause it may differ.

Answer 1

Ok, never mind, I found a solution. Just use ajaxSend():

$(document).ajaxSend(function(event, xhr, settings){
    if (!csrfSafeMethod(settings.type)) {
        xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
});

Answer 2

The config passed in $.ajax will override the config in $.ajaxsetup, so you can call global beforesend func first and then do custom jobs

$.ajaxSetup({
  crossDomain: false, // obviates need for sameOrigin test
  beforeSend: function(xhr, settings) {
    if (!csrfSafeMethod(settings.type)) {
      xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
    }
  }
});

$.ajax({
    type: "POST",
    url: "url",
    data: data,
    beforeSend : function(xhr, settings){
      //call global beforeSend func
      $.ajaxSettings.beforeSend(xhr, settings);
      //add some custom code below
      $("#spinner").show();
      blah blah blah
    },
});

Answer 3

Thank you for solution to alekwisnia! I just want to show the solution in one piece and explain more:

Add your head this script for create csrf token:

<script src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>

And add csrf token to your ajax request header with ajax setting function:

<script>
var csrftoken = Cookies.get('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
 return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
  beforeSend: function(xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
        xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});
$(document).ajaxSend(function(event, xhr, settings){
    if (!csrfSafeMethod(settings.type)) {
        xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
});
</script>