Проблема CORS в React и django

Подробности ошибки

enter image description here

Что я искал до сих пор?

Аксиомы блокируются политикой CORS с Django REST Framework

Проблема CORS с react и django-rest-framework

но безрезультатно

Что я делаю?

Отправка POST запроса из react в DJango API

Файл настроек на стороне Django

CORS_ORIGIN_ALLOW_ALL = True
ALLOWED_HOSTS = ["http://127.0.0.1:3000"]
CORS_ORIGIN_WHITELIST = [
    'http://127.0.0.1:3000'
]

INSTALLED_APPS = [
    ......,
    "corsheaders"
]

MIDDLEWARE = [
    .........,
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

Ответ на запрос axios

function authenticate() {
    let body = {
        "email": "ac",
        "password": "def"
    };
    const headers = {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json',
    }

    axios.post("http://127.0.0.1:8000/login/", body, {
        headers: headers
    })
    .then(function(response) {
        console.log(response.data);
    })
    .catch(function(error) {
        console.log(error);
    });
}

Попробуйте удалить 'Access-Control-Allow-Origin': '*' в коде React, поскольку CORS должен быть решен на стороне сервера

Иногда это происходит из-за шаблона url. Пожалуйста, проверьте шаблон url, требует ли он слеша в конце или нет.

Попробуйте использовать 'login' вместо 'login/'

По-моему, вы забыли указать "mode": "cors" для ваших запросов, не так ли? И вам придется обрабатывать на стороне сервера "OPTIONS" запросы, сделанные браузером в фазе Preflight.

Заголовок "Access-Control-Allow-Origin" должен быть отправлен сервером в ответе. В запросе он не нужен.

Прочитайте хорошее объяснение о запросах "CORS" здесь: https://javascript.info/fetch-crossorigin

Для правильной настройки Django прочитайте это: Как включить CORS на Django REST Framework

Нижеприведенные настройки работают для меня

CORS_ORIGIN_ALLOW_ALL = True
ALLOWED_HOSTS = [
    "127.0.0.1", 
]

CORS_ALLOWED_ORIGINS = [
    "http://127.0.0.1", 
]
CORS_ALLOW_CREDENTIALS = False

INSTALLED_APPS = [
    .....
    "corsheaders"
]


MIDDLEWARE = [
    ......
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

Попробуйте удалить CORS_ALLOWED_ORIGINS. Оставьте CORS_ORIGIN_ALLOW_ALL = True.
Это мои настройки на реальном сервере:

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_HEADERS = [
  'accept',
  'accept-encoding',
  'authorization',
  'content-type',
  'origin',
  'dnt',
  'user-agent',
  'x-csrftoken',
  'x-requested-with']
CORS_ALLOW_METHODS = ['DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT']
Вернуться на верх