React Django Auth

Я пытаюсь войти в систему через приложение ReactJS и вот какая ошибка возникает:

Доступ к XMLHttpRequest на 'http://localhost:8000/auth/login/' от origin 'http://localhost:3000' был заблокирован политикой CORS: Ответ на предварительный запрос не проходит проверку контроля доступа: The значение заголовка 'Access-Control-Allow-Credentials' в ответе '', которое должно быть 'true', когда режим мандатов запроса является 'include'. Режим учетных данных запросов, инициированных с помощью XMLHttpRequest, контролируется атрибутом withCredentials.

.

хотя я добавил CORS_ALLOW_CREDENTIALS: True к settings.py:

А вот запрос Axios:

axios.post('http://localhost:8000/auth/login/', {username: username, password:password}, {withCredentials: true})
            .then(r => {console.log(r)})
            .catch(function (error) {
                console.log(error)
              });

Вы написали MIDDLEWARE в неправильном порядке, правильный порядок в вашем случае будет
`MIDDLEWARE = [

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

]`

Вот как можно решить эту проблему с помощью django-cors-headers

  1. Установите его в env : pip install django-cors-headers

    .

  2. Настройте параметры

    .

Добавьте corsheaders в INSTALLED_APPS

Добавьте CorsMiddleware над CommonMiddleWare в MIDDLEWARE

Создать CORS_ORIGIN_WHITELIST

Пример:

INSTALLED_APPS = [
    ...
    'rest_framework',
    'corsheaders',
    ...
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # Others middleware here
]

CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000', # For react front end
    'http://localhost:8000', # For Django
)

NB : Очень важно, чтобы corsheaders.middleware.CorsMiddleware появлялся в правильном месте. То есть выше django.middleware.common.CommonMiddleware в настройке MIDDLEWARE поскольку middlewares загружаются сверху вниз. Также обратите внимание, что мы внесли в белый список два домена: localhost:3000 и localhost:8000. Первый - это порт по умолчанию для React, который мы будем использовать для нашего фронтенда. Второй - это порт по умолчанию для Django.

После потраченных часов и часов это оказалось глупой ошибкой, которую я совершал:

CORS_ALLOW_CREDENTIALS: True

Вместо:

CORS_ALLOW_CREDENTIALS = True
Вернуться на верх