Как в get запросе исправить No 'Access-Control-Allow-Origin'?

Question

[Anton Antonov]

Учу реак по Стефану Гридеру, и столкнулся с проблемой. Когда делаю get запрос через axios то в консоле выдаёт ошибку,
Failed to load samples.openweathermap.org/data/2.5/forecast?appid...: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:3000' is therefore not allowed access.
xhr.js:178 XHR finished loading: GET "samples.openweathermap.org/data/2.5/forecast?appid...".

я так понимаю что это из за локалхоста..

Хотя должно вроде проходить без проблем. Может кто знает как пофиксить? Благодарю!

Answer 1

[holymotion]

Установите google chrome extensions: CORS https://chrome.google.com/webstore/detail/allow-co...

Включайте и делайте кросдоменные запросы, отлично подойдет в учебных целях

Answer 2

[Rsa97]

Если сервер samples.openweathermap.org вам не принадлежит, то никак.
Это ограничение на кросс-доменные запросы (CORS). При AJAX-запросе к стороннему серверу браузер добавляет заголовок Origin в котором указывается домен страницы (в вашем случае - localhost:3000). В ответ сервер, к которому делается запрос должен вернуть заголовок Access-Control-Allow-Origin с указанием вашего домена или *. Если такой заголовок не пришёл, браузер блокирует AJAX-запрос.
Обойти это ограничение можно только транслируя запрос через свой сервер, то есть ваша страница посылает запрос к вашему же серверу, бэкенд вашего сервера запрашивает данные с samples.openweathermap.org и ретранслирует ответ.

Comments

[Anton Antonov]

Благодарю сударь =)