Распрекрасный Rutube и получение объекта видео через «fetch», почему ошибка?

Question

[Shimpanze]

При переходе по ссылке получения объекта со всеми данными о видео:

https://rutube.ru/api/video/37daa4e656174d04db06c5fca7548751

...объект прекрасно отображается в браузере.

При попытке его получить через «fetch» - пусто.

const url = `https://rutube.ru/api/video/37daa4e656174d04db06c5fca7548751`;
const options = {
  mode: 'no-cors',
  method: 'get'
};

function load (url) {
  return new Promise(async function (resolve, reject) {
    const res = await fetch(url, options)

    console.log('Loaded:', url)

    resolve(res.json())
  })
}

const promise = load(url)

promise.then(console.log)

На выходе:

>>> Uncaught (in promise) 
>>> SyntaxError: Unexpected end of input

Comments

[Stockholm Syndrome]

во-первых, зачем оборачивать fetch в промис, если он и так возвращает промис? можно просто написать

const res = await fetch(url, options)
console.log('Loaded:', url)
return res.json()

во-вторых, посмотрите какой вообще результат возвращает запрос, не вызывая метод json(), ошибка гласит о том, что он не смог распарсить, потому что там не json

[Shimpanze]

Stockholm Syndrome, он даже текст не вытаскивает - возвращает пустую строку. Вот максимально упрощенный пример:

const url = `https://rutube.ru/api/video/37daa4e656174d04db06c5fca7548751`;
const options = {mode: 'no-cors'};

fetch(url, options)
  .then(function (response) {
    return response.text();
  })
  .then(function (text) {
    console.log(text);
  });

Что ему нужно?

[maksam07]

Этот апи юрл - официальный, который описан в документации?

[Shimpanze]

maksam07, Я не знаю. Я нашёл эту ссылку на одном из форумов. Через браузер же, объект получается. Какого его не может получить «fetch»?

[Lynn «Кофеман»]

В режиме mode: 'no-cors' в принципе нечего парсить, потому что браузер вам ничего не отдаст.

Answer 1

[maksam07]

Shimpanze,

Какого его не может получить «fetch»?

Через браузер вы обращаетесь от домена эндпоинта, от которого хотите получить информацию.
У рутуба настроена политика CORS. Лучше обратиться к официальной документации, но если не хотите, то пользоваться чем-то подобным:

const proxyUrl = 'https://api.allorigins.win/get?url=';
const targetUrl = 'https://rutube.ru/api/video/37daa4e656174d04db06c5fca7548751';

fetch(proxyUrl + encodeURIComponent(targetUrl))
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        // данные могут быть внутри data.contents
        console.log('Data retrieved:', JSON.parse(data.contents));
    })
    .catch(error => {
        console.error('There was a problem with the fetch operation:', error);
    });

Comments

[Dmitry Bay]

Спасибо за сервис. удобная вещь для прокси.