Django + React Axios Network Error: Access-Control-Allow-Credentials expected 'true'

I am working on a web app running React on the front end and Django on the back end and am running into a issue when sending api requests to the back end. When attempting a POST or GET request, there occurs a Axios Network Error popping up on the site reading:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/is_authenticated/. (Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’).

Nevertheless, when inspecting the network request in Firefox, the JSON response does contain the correct data and has a 200 OK status. Just a warning appears "Response body is not available to scripts (Reason: CORS Missing Allow Credentials)".

My current backend settings using CorsMiddleware are

INSTALLED_APPS = [
    ...
    'app',
    'corsheaders',
    'rest_framework',
    ...
]
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]
CORS_ALLOW_CREDENTIALS: True
CSRF_COOKIE_SECURE = False, 
CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOWED_ORIGINS = [
    'http://127.0.0.1:3000',
    'http://127.0.0.1:8000',
    'http://localhost:3000',
    'http://localhost:8000',
]

When sending the request I have the current axios post call.

axios.post(`http://localhost:8000/login/`, request, { withCredentials: true })
    .then(({ data }) => {
      if (data.warning) return;
        localStorage.setItem("currentUser", data.user);
    });

Is there a setting I am overlooking or specific error in my code? Or are there certain front-end settings on Axios that I need to update to allow credentials? Thank you for your help.

oops, this is embarrassing but after head banging for about 4 hours. Realized I did Cors-Allow-Credentials: True instead of Cors-Allow-Credentials = True.

Back to Top