Как можно исправить ошибку No 'Access-Control-Allow-Origin'?

Question

[geniousperson]

Всем привет, как можно исправить данную ошибку в JS?
No 'Access-Control-Allow-Origin' header is present on the requested resource.
https://codepen.io/lycorp/pen/rJPopp - ссылка на проект!
Пробовал cors, но почему то не получается!
Не могу исправить, если поможете помочь, буду благодарен)

Comments

[Сергей delphinpro]

Как исправить?
Тут вариант один — сервер, к которому вы обращаетесь, должен отправлять пресловутый заголовок. Если сервер ваш — проблем нет. Если это сторонний сайт — читать документацию по их апи, или договариваться с владельцем.

Answer 1

[Владимир Скибин]

CORS тут не сработает, проксируйте запрос через бэкэнд.
Суть ошибки - в том, что ресурс, с которого запрашиваете данные - не предоставляется заголовок для CORS.

Comments

[geniousperson]

Спасибо)
Но не слышал о таком, можете пожалуйста скинут ссылку на какую то документацию?

[Владимир Скибин]

geniousperson, Да первые несколько ссылок из поисковика по запросу "как работает CORS" Вам помогут.

[geniousperson]

Владимир Скибин, Ну я это и пробовал, не сработало, ошибка одна и та жа)
Может быть что то неправильно сделал, хотя кроме данной ошибки нет других)

[Владимир Скибин]

geniousperson, всмысле пробовали? Вы владелец домена и сайта на который Вы отправляете запрос? Если нет, то как Вы пробовали?

[geniousperson]

Владимир Скибин, Так я же написал что пробовал cors, потом понял что без доступа к сайту не получится!
Потом вы написали (CORS тут не сработает, проксируйте запрос через бэкэнд. )
Вот я спрашиваю как проксировать?

[Владимир Скибин]

geniousperson, Смотрите, если Вы вополняете запрос на тот сайт из JS - то он выполняется в браузере посетителя в рамках Вашего сайта. Естественно когда отправляется запрос напрямую (тупо открыть получившуюся ссылку во вкладке браузера) - то все откроется, но для того, чтобы Ваш сайт имел доступ по AJAX к другому сайту - другой сайт должен это разрешить. Делается это через заголовки CORS тем сайтом, который разрешает, а не спрашивает с него данные. Иначе так можно было положить любой сайт, разместив AJAX запрос на популярном ресурсе на чужой сайт и все, кто открыл сраницу - делали бы запрос, что приводило бы к небольшой DoS-атаке. Таким образом, чтобы решить Вашу проблему - Вам нужно отправить запрос на свой бэк, который сформирует обычный запрос на мунволк, подождет с него ответ и отдаст его скрипту Вашего фронта. Потому это и получается проксирование через Ваш бэк.

[akass]

Владимир Скибин, Проще даже nginx`ом спроксировать.

[Владимир Скибин]

akass, можете и nginx'ом проксировать, не суть важно, главное чтобы напрямую от посетителя не шел AJAX мунволку, а шел на контролируемый Вами ресурс.

[geniousperson]

Спасибо, попробую)

[akass]

Владимир Скибин, да я то в курсе, просто озвучил ещё один вариант. Он иногда проще.

Answer 2

[Anton fon Faust]

Во-первых,

const moonURL = "http://moonwalk.cc/api/videos.json?";

заменить на

const moonURL = "https://moonwalk.cc/api/videos.json?";

А дальше уже общаться с владельцами домена.

Comments

[geniousperson]

для того что бы получить доступ, обработка идет слишком долго!
Обойти никак?

[Anton fon Faust]

можете поднять сервер, который будет, например, через curl отправлять запросы от вашего сайта и возвращать вашему сайту результат. А там уже хотите парсите на стороне сервера, хотите - на клиенте.
Но по-моему, проще дождаться обработки запроса на доступ.