How do I handle CSRF tokens in Django with AJAX?

How do I handle CSRF tokens in Django with AJAX?

In Django, you can handle CSRF tokens in AJAX requests by including the token in your request headers. You can get the CSRF token from the cookie or from the rendered template.

Can you show me an example of how to include the CSRF token in a jQuery AJAX request?

Sure! You can use the following code snippet:

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

const csrftoken = getCookie('csrftoken');

$.ajax({
    type: 'POST',
    url: '/your-url/',
    headers: {'X-CSRFToken': csrftoken},
    data: { /* your data */ },
    success: function(response) {
        console.log(response);
    }
});

What if I'm using Fetch API instead of jQuery?

If you're using the Fetch API, you can include the CSRF token in the headers like this:

fetch('/your-url/', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrftoken
    },
    body: JSON.stringify({ /* your data */ })
})
.then(response => response.json())
.then(data => console.log(data));