Как устранить CORS ошибку в fetch?

Question

[didrux]

async function getIcalData() {
            return await fetch('url');
        }
        
        getIcalData().then(promise => promise.text()).then(response => this.vacancyCalendar.setAttribute('reservations', new CalendarReservations(response).convertJsonReservationsToString()));

Получаю вот такую ошибку:

Access to fetch at 'url' from origin 'localhost:63342' 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.

Как решить? При открывании ссылки из браузера - всё прекрасно работает. (с промисами сталкиваюсь впервые)

Comments

[twobomb]

Добавь в скрипт на сервере куда идёт запрос заголовки ответа
"Access-Control-Allow-Origin" с значением "* "
Ну и можно "Access-Control-Allow-Headers" с значением "Origin, X-Requested-With, Content-Type, Accept"

[Gias]

Сервер стороннего api, в Google есть только информация об отключении протоколов безопасности в браузере. Может всё таки есть ещё что-то?

Answer 1

[Александр Нестеров]

0.Почитать, что такое CORS и почему возникает ошибка.
1.Если сервер ваш - настроить поведение CORS (например в htaccess).
2.Если не ваш - добавить домен в кабинете (данная функция есть далеко не везде. А если и есть, то не факт, что возможно добавить локалхост)
3.Если указанное выше невозможно - делать запросы через бекенд

Answer 2

[nonconformiste]

тут дело не в промисах, если запрашиваемый сервер не твой то выход тут один, залить на vps свой сервер для обхода cors, например этот, пересылать запросы через него. заранее скажу что лучше сразу позаботится на нем о ssl, так как chrome может ругатся на микшированный контент.