Vue + DRF No 'Access-Control-Allow-Origin' header
Имею API, которое по запросам http://localhost:8000/api/vacancies/ - выводит все вакансии списком http://localhost:8000/api/vacancies/3/ - выводит конкретную вакансию работает как в браузере (вывод от DRF), так и в Postman
Что примечательно: первый запрос - прекрасно отрабатывается vue вот так:
fetch(link, {
method: "get"
})
.then(response => {
return response.json();
})
.then(jsonData => {
this.results = jsonData;
});где link - ссылка
Я делаю ссылку для vue-router, передаю туда id, нужной вакансии, vue открывает новый шаблон, показывает, что он получил параметр, сгенерировал ссылку вида http://localhost:8000/api/vacancies/3/ правильно, но вместо результата выдаёт ошибку
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
и
net::ERR_FAILED
Для выполнения запроса использую тот же код, что и в 1 случае Почему не отрабатывает запрос?
Ответы (3 шт):
проблема решилась установкой
решилась частично - данные получаются и отображаются, но ошибки в консоль летят
Можно запустить Google Chrome с параметрами отключения безопасности
--disable-web-security --user-data-dir="C:\pathToNewFolder"
Перез запуском необходимо отключить все рабочие процессы Google Chrome
Данный способ подходит, если вы тестируете ваше приложение и сервер API находиться на разных портах.
Другой вариант, состоит в том чтобы сервер API отправлял ответ клиенту с заголовком Access-Control-Allow-Origin: *
Для тех, кто еще борется с этой проблемой, вот простой гайд, который может вам помочь.
- Устаналиваем пакет django-cors-headers (pip install django-cors-headers)
- Добавляем в INSTALLED_APPS = ['corsheaders',]
- Добавялем в MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware',]
- Устанавливаем флажок в settings.py CORS_ORIGIN_ALLOW_ALL = True После этого запускаем сервер и все должно работать.