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
.