'Django CSRF cookie not set error with React + Redux + Axios. Even though I added it to headers

I am using Django with React. I am fetching the csrf token from Django using get_token() method from from django.middleware.csrf import get_token.

I am passing it while making post request from React using Axios. Here is the code

return await Client.post(endpoint, {
            headers: {
                "Authorization": "Bearer " + getState().auth.accessToken,
                "X-CSRFToken": getState().auth.csrf,
            },
            withCredentials: true,
            data,
        });

I am getting this error on my backend

Forbidden (CSRF cookie not set.):

I then tried to add cookie in the headers...

headers: {
    "Authorization": "Bearer " + getState().auth.accessToken,
    "X-CSRFToken": getState().auth.csrf,
    "Cookie": getState().auth.csrf
},

Still don't work

Here is csrf setting in settings.py

CSRF_TRUSTED_ORIGINS = [
    "localhost:3000",
]
CSRF_COOKIE_HTTPONLY = True


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source