ReactJS & Django : How can I send csrf token with axios in a proper way?

Question

I'm pretty new to using ReactJS with Django.

What I want is simple. I want to send a request to make an account. Front-End server and the Back-End server are completely divided. They only communicates with AJAX, and nothing more, they're not even in the same server.

I tried several ways to send a request to make an account, and nothing worked.

Here's what I tried in JavaScript:

Add an option called withCredentials:true on axios. This adds cookie on header, but django says "csrftoken incorrect or not set."

Set the following:

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

-> this doesn't make any effects.

Set the following:

axios.defaults.headers.common = {
  'X-Requested-With': 'XMLHttpRequest',
  'X-CSRF-TOKEN' : (document.cookie).replace("csrftoken=", "")
};

-> this makes axios to make only "option" method requests. but I don't know why and of course, this doesn't work.

Here's what I changed in Django's settings.py:

CSRF_COOKIE_NAME = "X-CSRFToken"
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_EXPOSE_HEADERS = (
    'Access-Control-Allow-Origin: *',
)

and of course, I added @ensure_csrf_cookie just above the view that does some register things.

Is there any way to fix this? I spend a lot of my time for this. I REALLY need your help. thanks.

Did you try https://www.npmjs.com/package/django-react-csrftoken? — Arpit Srivastava, May 06 '18 at 15:00
to Arpit, Yeah, that's the one also I've tried. I setted it for my view that does some register things — purolor, May 06 '18 at 15:10
Possible duplicate of [CSRF with Django, React+Redux using Axios](https://stackoverflow.com/questions/39254562/csrf-with-django-reactredux-using-axios) — StackedQ, May 06 '18 at 15:43

score 1 · Answer 1 · answered Mar 20 '19 at 09:21

You can install js-cookie via npm (or other methods that suites you) link here

Call the Cookies in js-cookie like so: import Cookies from 'js-cookie';

Then take the cookies by doing: Cookies.get()

Cookies.get() gives you an object which contains the csrftoken. So you can do something like this overall:

const cookies = Cookies.get()

Then in your headers in your axios request you can add this:

headers: new Headers({"Content-Type": "application/json", 'X-CSRFToken': cookies.csrftoken})

ReactJS & Django : How can I send csrf token with axios in a proper way?

1 Answers1