CSRF with Django, React+Redux using Axios

by

This Q&A is from 2016, and unsurprisingly I believe things have changed. The answer continues to receive upvotes, so I’m going to add in new information from other answers but leave the original answers as well.

Let me know in the comments which solution works for you.

Option 1. Set the default headers

In the file where you’re importing Axios, set the default headers:

import axios from 'axios';
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
axios.defaults.xsrfCookieName = "csrftoken";

Option 2. Add it manually to the Axios call

Let’s say you’ve got the value of the token stored in a variable called csrfToken. Set the headers in your axios call:

// ...
method: 'post',
url: '/api/data',
data: {...},
headers: {"X-CSRFToken": csrfToken},
// ...

Option 3. Setting xsrfHeaderName in the call:

Add this:

// ...
method: 'post',
url: '/api/data',
data: {...},
xsrfHeaderName: "X-CSRFToken",
// ...

Then in your settings.py file, add this line:

CSRF_COOKIE_NAME = "XSRF-TOKEN"

Edit (June 10, 2017): User @yestema says that it works slightly different with Safari[2]

Edit (April 17, 2019): User @GregHolst says that the Safari solution above does not work for him. Instead, he used the above Solution #3 for Safari 12.1 on MacOS Mojave. (from comments)

Edit (February 17, 2019): You might also need to set[3]:

axios.defaults.withCredentials = true

Things I tried that didn’t work: 1

More Related Contents:

  1. Django Rest Framework remove csrf
  2. “CSRF token missing or incorrect” while post parameter via AJAX in Django
  3. How to overcome the CORS issue in ReactJS
  4. Attach Authorization header for all axios requests
  5. Handling async request with React, Redux and Axios?
  6. What is the right way to use angular2 http requests with Django CSRF protection?
  7. How to get Django and ReactJS to work together?
  8. Axios get in url works but with second parameter as object it doesn’t
  9. React Proxy error: Could not proxy request /api/ from localhost:3000 to http://localhost:8000 (ECONNREFUSED)
  10. How to filter empty or NULL names in a QuerySet?
  11. Understanding React-Redux and mapStateToProps()
  12. How to view corresponding SQL query of the Django ORM’s queryset?
  13. In a django model custom save() method, how should you identify a new object?
  14. Unique fields that allow nulls in Django
  15. How to use the request in a ModelForm in Django
  16. Django – iterate number in for loop of a template
  17. How to convert a Django QuerySet to a list?
  18. django class-based views with inline model-form or formset
  19. Django: accessing session variables from within a template?
  20. Django: Can class-based views accept two forms at a time?
  21. Django: Redirect logged in users from login page
  22. How do I add a Foreign Key Field to a ModelForm in Django?
  23. boto.exception.S3ResponseError: S3ResponseError: 403 Forbidden
  24. Can I call a view from within another view?
  25. How can I restrict Django’s GenericForeignKey to a list of models?
  26. Axios – DELETE Request With Request Body and Headers?
  27. Nginx connection reset, response from uWsgi lost
  28. What is the best way to store password in database when API call requires sending of password in plain text?
  29. FastAPI is not returning cookies to React frontend
  30. CSRF verification failed. Request aborted. on django

Leave a Comment