Code d'erreur 403 lors de l'utilisation de axios.post vers un point de terminaison Django dans une application React

Question

J'obtiens une erreur 403 lorsque j'essaie d'effectuer une simple requête vers une vue Django à partir de mon application react. Voici mon code :

vues.py

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

Login.js (composant React)

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'),

Est-il possible que la bibliothèque 'js-cookie' ne fonctionne pas ? Je n'ai {% csrf_token %} nulle part car je n'utilise pas de modèle django autre que index.html. À la place, j'ai le décorateur @csrf_protect. Je pense que c'est ce que je suis censé faire en me basant sur la directive docs .

Answer 1

Il suffit de définir les paramètres ci-dessous. Rien d'autre n'est nécessaire.

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