403 error code when using axios.post to Django endpoint in React app

Question

I am getting a 403 when I try to make a simple post request to a django view from within my react app. Here is my code:

views.py

@csrf_protect
def test_view():
    if (request.method == 'POST'):
        return HttpResponse(request.body)

Login.js (React component)

import Cookies from 'js-cookie';

//React constructor {

  test_view() {
      const csrftoken = Cookies.get('csrftoken');
      const config = {
        headers: {'HTTP_X_CSRFTOKEN': csrftoken},
      }
      axios.post('/prototype/hello/', {firstName: 'Fred'}, config)
        .then(res => {console.log("Test res: " + res.data)});
  }
//}

urls.py

    url(r'^hello', views.test_view, name='test-view'),

Is it possible that the 'js-cookie' library isn't working? I don't have {% csrf_token %} anywhere because I'm not using a django template other than index.html. Instead, I have the @csrf_protect decorator. I think that is what I'm supposed to do based on the docs.

you don't have to use csrf_protect if you didn't disable csrfmiddleware. and have you confirm that the cookies did get the csrf_token ? — whale_steward
– whale_steward, Commented Mar 30, 2017 at 1:47

Vishal · Accepted Answer · 2017-09-13 10:33:36Z

10

Simply, set the below settings. Nothing else is required.

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';

answered Sep 13, 2017 at 10:33

Vishal

1,2721 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

403 error code when using axios.post to Django endpoint in React app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related