Django Rest Framework - DELETE ajax call failure due to incorrect CSFR token

Question

I'm trying to use the django rest framework to to easily handle some models as restful resources. this is the code that I have:

Django: 1.7.1

Django REST Framework: 2.4.4

jQuery: 2.1.1

# models.py

class DocumentNodeTemplate(MPTTModel):
    """

    """
    document_template = models.ForeignKey(
        DocumentTemplate,
        related_name="nodes",
        verbose_name="Document template"
    )
    parent = TreeForeignKey(
        'self',
        null=True, blank=True,
        related_name='children'
    )
    section_template = models.ForeignKey(
        'SectionTemplate',
        related_name="node_templates",
        verbose_name="Section template"
    )

    def __unicode__(self):
        return  self.section_template.name

    def get_class(self):
        type = self.section_template.type
        return import_string(type)


# serializers.py

class DocumentNodeTemplateSerializer(serializers.ModelSerializer):
    class Meta:
        model = DocumentNodeTemplate
        fields = ('document_template', 'parent', 'section_template')


# views.py

class DocumentNodeTemplateAPIView(CreateAPIView, RetrieveUpdateDestroyAPIView):
    queryset = DocumentNodeTemplate.objects.all()
    serializer_class = DocumentNodeTemplateSerializer


<!-- HTML (section - admin's change form customization)-->
<fieldset class="module aligned">
    <h2>{{ node_fieldset_title }}</h2>
    <div class="form-row document-nodes">
        <div
        style="width: 100%; min-height: 450px;" id="general-container"
        data-document_model="{{ document_model }}"
        >
            <form id="changelist-form" action="" method="post" novalidate>{% csrf_token %}
                <div id="tree-container">
                    <div id="tree"
                         data-url="{{ tree_json_url }}"
                         data-save_state="{{ app_label }}_{{ model_name }}"
                         data-auto_open="{{ tree_auto_open }}"
                         data-autoescape="{{ autoescape }}"
                            >
                    </div>
                    <div class="add-node">
                        <a href="/admin/document/{{ model_name }}/add/?_to_field=id&document_id={{ object_id }}" class="add-another"
                            onclick="return showCustomAddAnotherPopup(event, this);">
                            <img src="/sitestatic/admin/img/icon_addlink.gif" width="10" height="10"
                                 alt="Add another node"> Add another node
                        </a>
                    </div>
                    <ul class='node-custom-menu'>
                        <li data-action="delete">Delete node</li>
                    </ul>
                </div>
            </form>
            <div id="node-container">
                <h3 id="node-name"></h3>
                <br/>

                <div id="node-content"></div>
            </div>
        </div>
    </div>
</fieldset>


// javascript 
var performCRUDaction = function(action, api_url, callback) {
var csfrtoken = $('input[name="csrfmiddlewaretoken"]').prop('value');
var _reloadNodeTree = function () {
    window.nodeTree.tree('reload');
}
var _performAction = function () {
    jQuery.ajax({
            type: actionType,
            url: api_url,
            data: { 'csrfmiddlewaretoken': csfrtoken },
            success: function () {
                console.log("action " + action + " successfully performed on resource " + api_url);
                _reloadNodeTree();
            },
            error: function () {
                console.log("action " + action + " failed on resource " + api_url);
            }
        });
    }


    var actionType,
        documentModel = null;
    var nodeDataObj = {};
    switch (action) {
        case "delete":
            actionType = "DELETE";
            break;
        case "update":
            actionType = "PUT";
            break;
        case "create":
            actionType = "POST";
            break;
        case "retrieve":
            actionType = "GET";
            break;
    }
    _performAction();
    callback();
}

I didn't posted all the code, anyway when that ajax call is triggered, I obtain a 403 error:

// headers

Remote Address:127.0.0.1:8050
Request URL:http://127.0.0.1:8050/api/documentnodetemplates/46
Request Method:DELETE
Status Code:403 FORBIDDEN
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-GB,en;q=0.8,en-US;q=0.6,it;q=0.4
Cache-Control:no-cache
Connection:keep-alive
Content-Length:52
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Cookie:djdt=hide; sessionid=x5cw6zfifdene2p7h0r0tbtpkaq7zshq; csrftoken=NyMqLlKxeeAdc4Eq2nFpFOebh0SUBBVY
Host:127.0.0.1:8050
Origin:http://127.0.0.1:8050
Pragma:no-cache
Referer:http://127.0.0.1:8050/admin/document/documenttemplate/1/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
X-CSRFToken:NyMqLlKxeeAdc4Eq2nFpFOebh0SUBBVY
X-Requested-With:XMLHttpRequest
Form Dataview sourceview URL encoded
csrfmiddlewaretoken:NyMqLlKxeeAdc4Eq2nFpFOebh0SUBBVY
Response Headersview source
Allow:GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS
Content-Type:application/json
Date:Thu, 20 Nov 2014 09:52:31 GMT
Server:WSGIServer/0.1 Python/2.7.6
Vary:Accept, Cookie
X-Frame-Options:SAMEORIGIN

// response
{"detail": "CSRF Failed: CSRF token missing or incorrect."}

Anybody experienced the same or similar problem and can help?

Thanks LuKe

Answer 1

You should delete all your Cookies and other site and plug-in data and Cached images and files by going into history tab and then clear browsing data...ANother option is to use @csrf_exempt decorator with your class based views..