Vue + DRF No 'Access-Control-Allow-Origin' header почему ошибка именно при запросе через Vue???

Question

[Mat1lda]

Имею API, которое по запросам localhost:8000/api/vacancies - выводит все вакансии списком 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 открывает новый шаблон, показывает, что он получил параметр, сгенерировал ссылку вида 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 случае Почему не отрабатывает запрос?



Вот так отрабатывает Postman + DRF, но fetch на конкретную вакансию не срабатывает?

В джанге есть настройка CORS_ORIGIN_ALLOW_ALL = True

Вот весь код https://github.com/Ljil/careerFrontend

Comments

[Александр]

Что приходит в переменную results первый раз?

[Mat1lda]

до установки results = undefined, после всё корректно

[Александр]

Mat1lda, после mounted. Что Вам возвращает API /vacancies? И results у Вас не undefined а [];

[Mat1lda]

Александр, /vacancies отрабатывал корректно, возвращая полный список, а ошибка появлялась при обращении к /vacancies/2 или любой другой конкретной вакансии

[Александр]

Mat1lda, Ну примеры ответов можно же написать? Обоих. Я уже ошибку вижу. Вот Вам подсказка @click="get_page(results.next)"

[Mat1lda]

vacancies/
Криво как-то отображает, но тут все 6 вакансий список + ссылки пагинации DRF

{"count":6,"next":"http://localhost:8000/api/vacancies/?limit=2&offset=2","
previous":null,"results":[{"id":2,"title":"Переводчик бандит","description":"й
цукеролвап","publish_date":"2020-03-26T16:49:52.874769Z","owner":{"id":
1,"title":"Kurwa Production","phone":"[phone]","mail":"kurwa@mail.p
l","owner":1}},{"id":3,"title":"Мемодел","description":"Our SnippetSerializer c
lass is replicating a lot of information that's also contained in the Snippe
t model. It would be nice if we could keep our code a bit more concise.  I
n the same way that Django provides both Form classes and ModelForm 
classes, REST framework includes both Serializer classes, and ModelSeria
lizer classes.  Let's look at refactoring our serializer using the ModelSeria
lizer class. Open the file snippets/serializers.py again, and replace the Sn
ippetSerializer class with the following.","publish_date":"2020-03-26T16:
52:26.527977Z","owner":{"id":1,"title":"Kurwa Production","phone":"[phone]","mail":"[e-mail]","owner":1}}]}

Такой ответ при vacancy/2

vacancy:Object (empty)

и ошибки

Uncaught (in promise) TypeError: Failed to fetch

Access to fetch at 'http://localhost:8000/api/vacancies/2' from origin 'http://localhost:8080' 
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.

при включении расширения хрома всё работает

[Александр]

Mat1lda, А ссылка в ответе другая

http://localhost:8000/api/vacancies/?limit=2&offset=2

и порты разные, поэтому CORS падает.

[Mat1lda]

Александр, @click="get_page(results.next)"
вот это как раз работает прекрасно) и страницы грузит) и ни одной ошибки не даёт) ибо тут ссылки генерирует сам DRF

[Mat1lda]

Александр,

http://localhost:8000/api/vacancies/?limit=2&offset=2

это ссылка, генерируемая Джанго для пагинации, благо работает

[Александр]

Mat1lda, тогда гуглите django cors middleware

[Mat1lda]

Александр, расширение для CORS в джанге стоит, и общий список выводится без ошибок, и в браузер и в postman, но ошибка была при переходе на конкретные вакансии

Answer 1

[Mat1lda]

Частично исправил установив https://chrome.google.com/webstore/detail/cross-do... данные получает, шаблон отрисовывает, но ошибки всё равно остаются