Как исправить ошибку «Политика одного источника не разрешает чтение удаленного ресурса»?

Question

[Bogdan Buchko]

Хочу сделать функцию, которая будет возвращать мое время в играх. Нашел сам api, и вставил его в fetch() и далее попытался вывести его в консоль, но произошла такая ошибка:

Запрос из постороннего источника заблокирован: Политика одного источника не разрешает чтение удаленного ресурса на http://api.steampowered.com/IPlayerService/GetOwnedGames/v0001/?key=XXX&steamid=XXX&format=json. (Причина: отсутствует заголовок CORS 'Access-Control-Allow-Origin'). Код состояния: 200.

Без понятия, как его исправить, ссылка рабочая, когда просто вставляю её в адресную строку.

const api_url = 'http://api.steampowered.com/IPlayerService/GetOwnedGames/v0001/?key=XXX&steamid=XXX&format=json';

const data = fetch(api_url)

console.log(data)

Вот сам json, если вместо XXX вставлять данные

Answer 1

[Rsa97]

https://developer.mozilla.org/en/docs/Web/HTTP/CORS
Если вкратце, то доступ со страницы, открытой в браузере с одного домена (foo.com) к другому домену (buz.com) требует, чтобы сервер buz.com возвращал заголовки явно разрешающие доступ для foo.com.
Это ограничение вшито в браузеры и обходится проксированием запроса через свой бэкенд.
Скрипт в браузере со страницы foo.com обращается к бэкенду foo.com, тот делает запрос к buz.com и возвращает ответ браузеру.