CSRF_Token in POST method using Vue.js and Django Rest Framework

Question

I'm trying to send a POST request from a Vue.js template to my API created with Django. When sending I get a 403 CSRF token missing or incorrect error. Since I separated the front and the back, I don't have a view with {csrf_token} on the Django side.

How do I send my form?

I tried some exemples on the web using cookies but i'm beginners and need more explaination about the POST subject and CSRF

I have a Djano View (and urls associated) juste like this :

def get_csrf_token(request):
token = get_token(request)
return JsonResponse({'token': token})

Whe i'm requesting the url, obtained the JSON with the token.

And on the Front side i'm using this method to get the Token :

getToken: function() {
                this.loading = true;
                this.$http.get('/qualite/get-token/')
                    .then((response) => {
                        this.token =response.data;
                        this.loading = false;
                    })
                    .catch((err) => {
                        this.loading = false;
                        console.log(err);
                    })
            },


addNc: function() {
                    let headers = {
                        'Content-Type': 'application/json;charset=utf-8'
                    };
                    if(this.token !== '') {
                        headers['HTTP_X-XSRF-TOKEN'] = this.token
                    }

                    this.loading = true;
                    this.$http.post('/qualite/api/nc/',this.newNc, {headers: headers})
                        .then((response) => {
                            this.loading = false;
                        })
                        .catch((err) => {
                            this.loading = false;
                            console.log(err)
                        })
                },

score 0 · Answer 1 · answered Apr 24 '20 at 12:03

0

For the CSRF you get by default after user login aside with the session, if you're using SessionAuthentication (It's the default authentication used in DRF).

You have to send it with each request in the header, you can refer the this link to know more about the header sent, as it's name is changed and can be configured.

Note also that in the settings you have to make sure that CSRF_COOKIE_HTTPONLY is set to False (which is the default), to be able to read it from the client side JS.

Another path would be removing CSRF enforcement per requests (But it's highly not recommended for security concerns), you can find more about this in the answer here.

answered Apr 24 '20 at 12:03

P. Naoum

457
5
14

Thank's for the answer. unfortunately i'm not using session actually. Is it necessary ? – QuRo Apr 24 '20 at 13:22
Nobody can help me ? – QuRo May 14 '20 at 06:41
Hi @ROGGYQUENTIN, did you ever get a solution to this issue? – Vikas Ojha Feb 14 '21 at 19:08

score 0 · Answer 2 · answered Apr 13 '21 at 10:51

0

Use a Token-based authentification.

answered Apr 13 '21 at 10:51

Abdarahmane Traoré

144
6

score 0 · Answer 3 · edited May 25 '21 at 02:30

0

Same issue i was encountered with,

the problem was, i had used Class based view and at the time of registered the url i forget to mention as_view() with class Name.

ex:- class PostData(APIView)

before :- path('post_data', PostData)

after correction:- path('post_data', PostData.as_view())

edited May 25 '21 at 02:30

C. Peck

3,641
3
19
36

answered May 24 '21 at 15:57

prakash kumar bhanja

1
1

CSRF_Token in POST method using Vue.js and Django Rest Framework

3 Answers3