Аксиос блокируется политикой CORS с Django REST Framework: заголовок 'Access-Control-Allow-Origin' в ответе не должен быть подстановочным символом

Используя vuejs3 и axios, я пытаюсь сделать вызов API к проекту django и получаю ошибку CORS на стороне chrome. Не уверен, какой настройки мне не хватает...

enter image description here

Возвращенный ответ preflight OPTIONS в порядке, но chrome расстроен тем, что заголовок 'Access-Control-Allow-Origin' имеет значение "*".

Я использую django-rest-framework с django-cors-headers.

django.settings:

ALLOWED_HOSTS = ["*"]

# CORS
CORS_ALLOW_ALL_ORIGINS = False  # was initially True
CORS_ALLOW_HEADERS = "*"

CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = ["https://mydomain", "http://localhost:8080", "http://127.0.0.1:8080"]

# Application definition
INSTALLED_APPS = [
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "corsheaders",
    ...
]

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "django.middleware.locale.LocaleMiddleware",
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    ...
]

vuejs/axios side:

axios.defaults.xsrfHeaderName = 'X-CSRFToken';
axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.withCredentials = true;
const url = `https://mydomin/my/endpoint/`;
response = axios.get(url);

Я думал, что установка CORS_ALLOW_ALL_ORIGINS на False и определение значений CORS_ALLOWED_ORIGINS решит проблему, но Access-Control-Allow-Origin заголовок по-прежнему отображается как "*".

Я упустил настройку?

Что находится в заголовках ваших http-запросов? Возможно, поможет включение ""Access-Control-Allow-Origin": "*"," если его там еще нет.

Попробуйте CORS_ALLOW_HEADERS в виде списка, как это

CORS_ALLOW_HEADERS = [
"accept",
"accept-encoding",
"authorization",
"content-type",
"dnt",
"origin",
"user-agent",
"x-csrftoken",
"x-requested-with",

]

Измените CORS_ALLOW_HEADERS на это. Я попробовал это и работает

CORS_ALLOW_HEADERS = [
    "accept",
    "accept-encoding",
    "authorization",
    "content-type",
    "content-disposition",
    "dnt",
    "origin",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",
]

Возможно, другое промежуточное ПО мешает промежуточному ПО CORS установить заголовок. В документации говорится:

CorsMiddleware должен быть размещен как можно выше, особенно перед любого промежуточного ПО, которое может генерировать ответы, например, Django's CommonMiddleware или WhiteNoiseMiddleware от Whitenoise. Если оно не находится до, оно не сможет добавить CORS заголовки к этим ответы.

Попробуйте изменить порядок промежуточного программного обеспечения, например:

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    ... 
]

Надеюсь, это поможет.

Попробуйте следующее:

Один:

Убедитесь, что ваше промежуточное программное обеспечение имеет следующие параметры

'django.contrib.sessions.middleware.SessionMiddleware',
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',

Два

Ваши настройки CORS в settings.py должны быть следующими, обратите внимание на белый список. Это поможет защитить ваш API от любого доступа, но чтобы это работало, используйте закомментированный блок

CORS_ALLOW_HEADERS = "*"
CORS_ORIGIN_WHITELIST = [
    'http://127.0.0.1:5173',
]
# CORS_ORIGIN_ALLOW_ALL = True

Три

Запрос на получение в Vue JS может выглядеть следующим образом

async login() {
            const response = await axios.get('url');
            console.log(response)
        },

Надеюсь, это поможет.

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