Post Request Via Ajax in Django CSRF Token Missing or Incorrect

 In this article, you will learn how to make a POST request in Django using Ajax. To make an Ajax call you must include csrf token in your ajax post call request.

CSRF Token Missing or Incorrect in Django

Below is the step-by-step guide on how to use Ajax with Django and make a POST request via ajax in Django.

Read More: Making Perfect SEO Friendly URL in Django Using Slug

First of all, I have an HTML file that contains a "textarea" input field and a button, the button has a JavaScript function called "ButtonSearchClick()". On that button click, we are going to make a POST request via ajax in Django.

Use Digital Marketing Tools Free

index.html

	<div class="form-group mb-3">
	<textarea id="textAreaId" rows="10" cols="20" class="form-control"></textarea>
	</div>
	<div class="form-group">
	<input id="btn_ajax_post" type="button" value="Ajax Post To Django" onclick="ButtonSearchClick()">
	</div>

view raw django_ajax_csrf_token_missing.html hosted with ❤ by GitHub

ajax_post.js

	<script>
	function ButtonSearchClick() {
	$.ajax({
	type: 'POST',
	url: "{% url 'your_django_url_name_goes_here' %}",
	success: function (response) {
	// on successfull creating object
	// your logic goes here
	},
	error: function (response) {
	// alert the error if any error occured
	alert(response["responseJSON"]["error"]);
	}
	});
	}
	<script/>

view raw django_ajax_csrf_token_missing_post_call.js hosted with ❤ by GitHub

If you did not set the csrf token, and you make an ajax post request to Django then you got the following error.

Forbidden (CSRF token missing or incorrect.)

[Resolved] Forbidden (CSRF token missing or incorrect)

You can use one of the below codes before making an ajax POST request call to Django.

Solution 1

	$.ajaxSetup({
	beforeSend: function(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;
	}
	if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
	Only send the token to relative URLs i.e. locally.
	xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
	}
	}
	});

view raw django_ajax_csrf_token_missing_ajaxSetup.js hosted with ❤ by GitHub

Solution 2

	$.ajaxSetup({
	data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
	});

view raw django_ajax_csrf_token_missing_ajaxSetup1.js hosted with ❤ by GitHub