Django session authentication and Axios POST signals

Question

I use Django Rest framework session authentication,after user logged in I can do successful POST request (/api/post/1/like/) using browsable API.

Why can't I post using axios ? (user instance is must for Django server to save the above API )

I hope POST signal may not know logged in user even though I am loggedin as admin user

AXIOS FUNCTION

const likebutton = (id)=>{
           axios.post(`/api/post/${id}/like/`)         
    }

ERROR

Error: Request failed with status code 403
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:61)

Probably something to do with CSRF protection unless this is being dealt with? — RBowen, May 10 '20 at 18:28
Thanks I will check it out, will axios POST work with Django session auth ? — Anoop K George, May 10 '20 at 18:30
I think it is possible but most of the time you would use jwt or token auth — RBowen, May 10 '20 at 18:36
I can use token authentication, but it is less secure as we store it in localStorage — Anoop K George, May 10 '20 at 18:40
Why are you using POST, are you trying to post something to the server? I never used Axios but I think it doesn't send cookies with requests by default: https://stackoverflow.com/questions/43002444/make-axios-send-cookies-in-its-requests-automatically — prime_hit, May 10 '20 at 18:53
To a certain degree it depends on your setup. If Django is serving up the react files on the same server then using SessionAuthentication in django_rest will work fine — RBowen, May 10 '20 at 19:08
You need to pass the CSRF_TOKEN https://docs.djangoproject.com/en/3.0/ref/csrf/#ajax — Iain Shelvington, May 10 '20 at 19:26

score 3 · Accepted Answer · answered May 11 '20 at 17:42

From django docs you can obtain the csrftoken with the following script:

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 = cookies[i].trim();
            // 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');

Or, by using Javascript Cookie Library:

var csrftoken = Cookies.get('csrftoken');

Then, all you have to do is to update your axios call to send it as a header:

const likebutton = (id) => {
    axios.post(`/api/post/${id}/like/`, { headers: { 'X-CSRFToken': csrftoken } })
}

Django session authentication and Axios POST signals

1 Answers1