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.

Answer 1

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

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