CSRF verification failed. Request aborted. in django ajax post

Question

I am getting the error CSRF verification failed. Request aborted.

I have two files one is post.html and post_reply.html

i am getting the post_reply file html to post.html using ajax

the view is

def Display_post(request):
    if request.method=="GET":
        post = Post.objects.all()
        #print post
        data = []
        for pos in post:
            rep = Comment.objects.filter(post=post)

            html = render_to_string('home/post_reply.html',{"post":post, "rep":rep})
            return HttpResponse(html, mimetype="application/json")

So now my reply form is on post_reply file which is getting to post.html Now here i am getting the CSRF verification failed. error I used @csrf_exempt still its not working

Post.html

function save_reply(s)
                    {
                        //alert("hello");
                        //alert(s);
                        $.djangocsrf( "enable" );

                                                    var reply = $(".rep1").val();

                                                    var form = $("#"+s).parent();

                                                    //alert(reply);
                                                    csr = $("#"+s).prev().val();
                                                    alert(csr);
                                                    data = {
                                                            reply: reply,


                                                        };
                                                    $.ajax({
                                                            url: "/home/reply_save/"+s,
                                                            type: "POST",
                                                            data: form.serialize(),
                                                            success: function (response) {
                                                                    alert("hello");

                                                                            },
                                                                error: function () {

                                                                                }
                                                        });
                    }

post_reply.html

  {% for postone in post %}
    <div class="testmain span11">
       <div class="span1 test1"><img src="/media/{{postone.image}}" width="70" height="70" class="img-circle img-responsive"/></div>
       <div class="span8 second">
          <div class="test1 span5"><a><strong>{{postone.user}}</strong></a></div>
          <br/>{{postone.time}}<br/><br/>
          <div class="test1 span7">{{postone.post}}</div>
          <div class="test span8"><img src="/media/{{postone.image}}" width="300" height="300"/></div>
          <div class="span8" style="margin-bottom:2%;"><a  class="replytopost" style="margin-left:-4%;" onclick='tog({{postone.pk}})'>Reply<span class="badge">{{postone.number_of_reply}}</span></a><input class="id5" type="hidden" value='{{postone.pk   }}'></div>
          <div id='{{postone.pk}}' class="hid">


<form method="post" action="." enctype="multipart/form-data" class="horizontal-form" role="form" id='{{postone.pk}}' style=""> {% csrf_token %}
          <input type="text" name="lname" class="rep1"  style="border-radius: 0px; "><input type="submit"  onclick="save_reply({{postone.pk}})" class="btn btn-info replysave" id='{{postone.pk}}' value="Reply" style="border-radius: 0px; margin-bottom: 10px;"/>
        </form>


          <br/>{% for rep1 in rep %}
             <div class="span1 test1"><img src="/media/{{postone.image}}" class="img-circle img-responsive" width="50" height="50"></div>
             <div class="span6 third">
                <div class="test1 span5"><a><strong>{{postone.user}}</strong></a></div>
                <br/>
                <div class="test1 span7">{{postone.post}}</div><br/>
               <div class="test1 span6" style="margin-top:3%; margin-left:10%; font-size:0.9em;">{% load humanize %} {{postone.time|naturaltime}}</div>
             </div>
             {% endfor %}
          </div>
       </div>
    </div>
    {% endfor %}

Answer 1

You can use a middleware to avoid csrf checks for all ajax posts, use it before csrf middleware.

class DisableCSRF(object):
    def process_request(self, request):
       if request.is_ajax():
          setattr(request, '_dont_enforce_csrf_checks', True)

Yeah its a quick and dirty solution, but i use it for my rest api backend which doesn't use cookies.

Answer 2

Follow django documentation:

add javascript code to your pages to send csrf value with ajax requests:

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;
}
var csrftoken = getCookie('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);
        }
    }
});