Проблема с CORS с реакцией и django -rest-framework

Question

Я использую реакцию на стороне интерфейса и Django на стороне. Я использую django-cors-headers для управления CORS в своем приложении Django.

Я добавил пакет в INSTALLED_APPS следующим образом: -

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework.authtoken',
    'rest_framework',
    'corsheaders',
    'services',
    'feeds',
    'knox',
    'users',
] 

, затем я также добавил в MIDDLEWARE

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    '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',
    'django.middleware.common.CommonMiddleware',
]

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
ALLOWED_HOSTS = ['*']

и я передаю заголовки CORS от моего клиентского приложения Реагирует приложение так: -

const Axios = axios.create({
    baseURL: `${BASE_URL}/api`,
    timeout: 1000,

    headers: { 
        'X-Custom-Header': 'foobar', 
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
     }  
})

Ошибка на веб-интерфейсе: -

Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/register' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

Answer 1

Заголовок Access-Control-Allow-Origin отправляется сервером, а не внешним интерфейсом. Сервер также не отправляет этот заголовок всегда. Всякий раз, когда клиент отправляет заголовок источника, только тогда сервер отправляет Access-Control-Allow-Origin, а когда источник не совпадает, выдается ошибка CORS. Если вы использовали create-Reaction-app для bootstrap вашего реактивного проекта, у них есть действительно хорошая документация по настройке proxy , поэтому вам не нужно настраивать CORS на бэкэнде. В django конфигурации попробуйте удалить ALLOWED_HOSTS = ['*'] line, CORS_ORIGIN_ALLOW_ALL = True должно работать для всех.