[Solved]-Django Rest Framework, CSRF and Vue.js

by

11👍

✅

So I’m posting this as an answer to close the question.

The issue was because of the wrong CSRF header name that was sent on request. According to documentation:

As with other HTTP headers in request.META, the header name received
from the server is normalized by converting all characters to
uppercase, replacing any hyphens with underscores, and adding an
‘HTTP_’ prefix to the name. For example, if your client sends a
‘X-XSRF-TOKEN’ header, the setting should be ‘HTTP_X_XSRF_TOKEN’.

Also I’m leaving here a reference to my question, which accumulates several problems that may lead to CSRF Failed: CSRF token missing or incorrect. error in Django.

👤Damaged Organic

2👍

Get token from cookie:

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

var csrftoken = readCookie('csrftoken');

Send token in headers POST:

  this.$http.post('http://'+document.location.host+'/api//',{params: {foo: 'bar'}}, {headers: {"X-CSRFToken":csrftoken }}).then(function (response) {
            this.response = response.data;
        },
        function (response) {
            console.log(response);
        });
👤Ruslan

Leave a comment