Django Rest CORS с Vue JS

У меня есть django rest framework api, работающий на http://127.0.0.1:8000/ и приложение Vue JS, работающее на http://127.0.0.1:5173/. Когда я делаю запрос из приложения vue, я получаю сообщение origin 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 и ниже приведены настройки в моем settings.py

Установленные приложения

"corsheaders",

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',
]

И разрешено

CORS_ORIGIN_ALLOW_ALL = True

Vue JS Code

axios.defaults.baseURL = 'http://127.0.0.1:8000/'; # In axios.js

async login() {
    const response = await axios.get('users', {
                username: this.username,
                password: this.password
            });
    console.log(response)
},

В doc write

CORS_ALLOW_ALL_ORIGINS: bool

Если True, то будут разрешены все происхождения. Другие параметры, ограничивающие допустимые источники, будут проигнорированы. По умолчанию False.

Установка значения True может быть опасной, так как позволяет любому сайту делать кросс-оригинальные запросы к вашему. Обычно вы хотите ограничить список разрешенных источников с помощью CORS_ALLOWED_ORIGINS или CORS_ALLOWED_ORIGIN_REGEXES.

Ранее эта настройка называлась CORS_ORIGIN_ALLOW_ALL, которая по-прежнему работает как псевдоним, но новое название имеет приоритет

https://github.com/adamchainz/django-cors-headers#cors_allow_all_origins-bool

После нескольких часов стресса и разочарования вот как я решил эту проблему. Я сохранил свой код Vue JS следующим образом

async login() {
            const response = await axios.post('auth/login/', {
                        username: this.username,
                        password: this.password
                    });
            console.log(response)

        },

и в моем файле Django settings.py мне пришлось добавить эти две строки:

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

Поскольку Алекс указал, что CORS_ALLOW_ALL_ORIGINS = True может быть опасным, отсюда и блок CORS_ORIGIN_WHITELIST.

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