{{csrf_token}} gives me 403 Forbidden and {%csrf_token%} gives me 500 Server Error

Question

I read these two are basically same thing, but each one gives me different errors I\'m not sure which one to go after. I don\'t even know how to fix this problem. Can someon

Answer 1

From Django Project Documenation:

While the above method can be used for AJAX POST requests, it has some inconveniences: you have to remember to pass the CSRF token in as POST data with every POST request. For this reason, there is an alternative method: on each XMLHttpRequest, set a custom X-CSRFToken header to the value of the CSRF token. This is often easier, because many javascript frameworks provide hooks that allow headers to be set on every request.

So you can pass csrftoken value as X-CSRFToken header, it could be fetched from cookie ( i've added getCookie function for that needs). You can easily do it by setuping your ajax request with ajaxSetup before sending it, see code below:

// Source https://docs.djangoproject.com/en/1.7/ref/contrib/csrf/#ajax    
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;
}

$(".notification-toggle").click(function(e){
  e.preventDefault();
  var token = getCookie('csrftoken');
  $.ajaxSetup({'headers': {'X-CSRFToken': token}});
  // $.ajax... 

Altrnatively you can try to replace your data from:

data: {
        csrfmiddlewaretoken:"{%csrf_token%}",
      },

to

data: {
        csrfmiddlewaretoken:$("input[name=csrfmiddlewaretoken]").val()
      },