Django 4.1.3 + React (axios) — как настроить CORS?

Question

[mspuz]

В приложении в качестве бэкенда использую Django + Rest Framework, а на фронте React + axios. Как только формирую запрос из фронта с указанием заголовков, в частности Authorization, получаю ошибку:

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

На стороне Django был установлен corsheaders и в файле settings прописал:

CORS_ORIGIN_ALLOW_ALL = True

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000',
]

CORS_ALLOW_HEADERS = ('content-disposition', 'accept-encoding',
                      'content-type', 'accept', 'origin', 'Authorization')

Вопрос, что нужно поправить, чтобы исправить работу с заголовками?

Comments

[mspuz]

В axios у меня следующие настройки:

headers: {
            'Content-type': 'application/json',
            'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, Authorization',
            'Access-Control-Allow-Methods': 'GET, DELETE, HEAD, OPTIONS',
            Authorization: `Bearer ${token}`,
        }

В ошибке написано, что не совпадают access-control-allow-methods и Access-Control-Allow-Headers. Что неверно?

Answer 1

[Ranwise]

все как в либе https://pypi.org/project/django-cors-headers/ и работает

Comments

[mspuz]

Сделал все как в руководстве

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'rest_framework',
    'corsheaders',
    'base.apps.BaseConfig',

]

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

CORS_ORIGIN_ALLOW_ALL = True

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

CSRF_TRUSTED_ORIGINS = [
    "http://localhost:3000",
]

CORS_ALLOW_HEADERS = ['content-disposition', 'accept-encoding',
                      'content-type', 'accept', 'origin', 'authorization']

[Ranwise]

mspuz, и какие ошибки?

[Ranwise]

возможно в

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

CSRF_TRUSTED_ORIGINS = [
    "http://localhost",
]
CORS_REPLACE_HTTPS_REFERER = True

CORS_ORIGIN_WHITELIST = [
    "http://localhost:3000",
    "http://127.0.0.1",
    "http://localhost",
]

Answer 2

[OCTAGRAM]

Что просят, то и добавить.

CORS_ALLOW_HEADERS = ('content-disposition', 'accept-encoding',
                      'content-type', 'accept', 'origin', 'Authorization',
                      'access-control-allow-methods')