[Django]-CSRF with Django, React+Redux using Axios

I’ve found out, that axios.defaults.xsrfCookieName = "XCSRF-TOKEN";
and CSRF_COOKIE_NAME = "XCSRF-TOKEN"

DOESN’T WORK IN APPLE Safari on Mac OS

The solution for MAC Safari is easy, just change XCSRF-TOKEN to csrftoken

So, in js-code should be:

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

In settings.py:

    CSRF_COOKIE_NAME = "csrftoken"

This configuration works for me without problems Config axios CSRF django

import axios from 'axios'

/**
 * Config global for axios/django
 */
axios.defaults.xsrfHeaderName = "X-CSRFToken"
axios.defaults.xsrfCookieName = 'csrftoken'

export default axios

After spending too many hours researching, and implementing the above answer, I found my error for this problem! I have added this answer to be supplemental of the accepted answer. I had set up everything as mentioned, but the gotcha for me was actually in the browser itself!

If testing locally, make sure you are accessing react through 127.0.0.1 instead of localhost! localhost handles request headers differently and doesn’t show the CSRF tokens in the header response, where as 127.0.0.1 will! So instead of localhost:3000 try 127.0.0.1:3000!

Hope this helps.

The “easy way” almost worked for me. This seems to work:

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

And in the settings.py file:

CSRF_COOKIE_NAME = "XCSRF-TOKEN"

You could add the Django-provided CSRF token manually into all of your post requests, but that’s annoying.

From the Django docs:

While the above method (manually setting CSRF token) can be used for AJAX POST requests, it has some inconveniences: you have to remember to pass the CSRF token in as POST data with every POST request. For this reason, there is an alternative method: on each XMLHttpRequest, set a custom X-CSRFToken header to the value of the CSRF token. This is often easier, because many JavaScript frameworks provide hooks that allow headers to be set on every request.

The docs have code you can use to pull the CSRF token from the CSRF token cookie and then add it to the header of your AJAX request.

There is actually a really easy way to do this.

Add axios.defaults.xsrfHeaderName = "X-CSRFToken"; to your app config and then set CSRF_COOKIE_NAME = "XSRF-TOKEN" in your settings.py file. Works like a charm.

For me, django wasn’t listening to the headers that I was sending. I could curl into the api but couldn’t access it with axios. Check out the cors-headers package… it might be your new best friend.

I fixed it by installing django-cors-headers

pip install django-cors-headers

And then adding

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

and

MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

into my settings.py

I also had

ALLOWED_HOSTS = ['*']
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_EXPOSE_HEADERS = (
    'Access-Control-Allow-Origin: *',
)

in my settings.py although that is probably overkill

In addition to what yestema said (and echoed by krescruz, cran_man, Dave Merwin et. al), You also need:

axios.defaults.withCredentials = true