Axios django 403 (forbidden): CSRF Failed: CSRF token missing

I have a Django-React Project. I can't POST or PUT APIs from the front; I get a 403 forbidden error every time I make a request, only works when I request from the back. I keep getting the same 'CSRF Failed: CSRF token missing.' message. It was working before completely until I ran 'npm i' to update dependencies that were missing. After that, everything broke. So I'm pretty certain my code is correct since it was working before, does anyone know if any node dependencies break stuff? There is csrftoken being generated under request headers cookies, not sure what would cause the issue.

This is how I am declaring my axios on the front:

    constructor() {
        // Necessary Credentials 
        axios.defaults.xsrfCookieName = 'csrftoken';
        axios.defaults.xsrfHeaderName = 'X-CSRFToken';
        axios.defaults.withCredentials = true;

        // Establish Axios Client
         this.client = axios.create({
            baseURL : "http://127.0.0.1:8000"
        });
    };

This is some of my settings.py that may be helpful:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
    'rest_framework',
    'API.apps.UserApiConfig'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware',
]


CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = [
     'http://localhost:3000',
     'http://127.0.0.1:3000',
]

CSRF_TRUSTED_ORIGINS = ['http://127.0.0.1:3000']


REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.IsAuthenticated',
    ),
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.SessionAuthentication',
    ),
}

Tried rolling back some nodejs version. Nothing works

Back to Top