Forbidden (CSRF token missing or incorrect.) Django how to solve?WITH MY CODE
when i press button, this error is blow up
Forbidden (CSRF token missing or incorrect.): /orders/basket_adding/
/
I take csrf_token from the form on the main page, all the others inherit from the page where the form is, from where I get the token!
Pls help me)
views
def basket_adding(request):
print('HER')
return_dict = {}
session_key = request.session.session_key
data = request.POST
context = {}
return JsonResponse(return_dict)
/////
///// html
{% extends "base.html" %}
{% load staticfiles %}
{% block content %}
<div class="single">
<div class="container">
<div class="single-main">
<div class="single-top-main">
<div class="col-md-5 single-top">
<div class="flexslider">
<ul class="slides">
{% for img in images %}
<li data-thumb="{{ img.image.url }}">
<div class="thumb-image"> <img src="{{ img.image.url }}" data-imagezoom="true" class="img-responsive"> </div>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="col-md-7 single-top-left simpleCart_shelfItem">
<h2>{{ product_himself.brand.name_of_brand }}</h2>
<h1 class="product_name" action="{% url 'orders:basket_adding' %}" >{{ product_himself.name_of_product }}</h1>
<p class="hidden product_id">{{ product_himself.id }}</p>
{% if product_himself.discount %}
<span>$<strike>{{ product_himself.price_of_product }}</strike> $<span class="item_price">{{ product_himself.price_with_discount }}</span></span>
{% else %}
$<h6 class="item_price">{{ product_himself.price_of_product }}</h6>
{% endif %}
<p>{{ product_himself.description }}</p>
<h4>Size</h4>
<ul class="bann-btns">
<li><select class="bann-size">
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select>
</li>
<li><a href="#" class="item_add">Add To Cart</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="singlepage-product">
{% for smart in img_bran %}
<div class="col-md-3 home-grid">
<div class="home-product-main">
<div class="home-product-top">
<a href="#"><img src="{{ smart.image.url }}" alt="" class="img-responsive zoom-img"></a>
</div>
<div class="home-product-bottom">
<h3><a href="{{ smart.access_to_product.get_absolute_url }}">{{ smart.access_to_product.description|truncatechars:25 }}</a></h3>
<p>Explore Now</p>
</div>
<div class="srch">
<span>${{ smart.access_to_product.price_of_product }}</span>
</div>
</div>
</div>
{% endfor %}
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
{% endblock content %}
base html (where located form, from which i take csrf_token)
<div class="hidden">
<form class="default_form"></form>{% csrf_token %}
</div>
////
js
$(document).ready(function(){
$(document).on('click', '.item_add', function(e){
e.preventDefault();
product_id = $(".product_id").html();
product_name = $(".product_name").html();
product_price = parseFloat($(".item_price").html())
product_size = $(".bann-size").val();
url = $(".product_name").attr("action");
console.log(url)
var data = {};
var csrf_token = $('.default_form [name="csrfmiddlewaretoken"]').val();
data.product_id = product_id
data.product_name = product_name
data.product_price = product_price
data.product_size = product_size
data["csrfmiddlewaretoken"] = csrf_token;
$.ajax({
url: url,
type: 'POST',
data: data,
cache: true,
success: function(data){
console.log("OK");
},
error: function(data){
console.log(data + "ERROR")
alert("Something wrong, try again!")
location.reload();
}
});
});
});
Your problem is you have not inserted CSRF token in form tag so it will not get any CSRF token.
for example
<div class="hidden">
<form class="default_form">
{% csrf_token %}
</form>
</div>