Почему JSON .parse () не работает с этим объектом?

Question

const Http = new XMLHttpRequest(); 
const url='https://www.instagram.com/nasa/?__a=1'; 
Http.open("GET", url); 
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText); 
  var instaData = JSON.parse(Http.responseText);
  console.log(instaData); 
}

Я пытаюсь получить объект JSON со страницы Instagram, чтобы можно было извлечь некоторые базовые c пользовательские данные. Приведенный выше код получает строку из Instagram, которая выглядит как правильно отформатированный объект JSON, но когда я пытаюсь использовать JSON .parse для него, я получаю сообщение об ошибке «JSON .parse: неожиданный конец данных в строке 1 столбец 1 из JSON data ".

Я не могу включить полный вывод Http.responseText, потому что он слишком длинный, 8 000+ символов, но начинается так:

{"logging_page_id":"profilePage_528817151","show_suggested_profiles":true,"show_follow_dialog":false,"graphql":{"user":{"biography":"Explore the universe and discover our home planet. \ud83c\udf0d\ud83d\ude80\n\u2063\nUncover more info about our images:","blocked_by_viewer":false,"country_block":false,"external_url":"https://www.nasa.gov/instagram","external_url_linkshimmed":"https://l.instagram.com/?u=https%3A%2F%2Fwww.nasa.gov%2Finstagram&e=ATOO8om3o0ed_qw2Ih3Jp_aAPc11qkGuNDxhDV6EOYhKuEK5AGi9-L_yWuJiBASMANV4FrWW","edge_followed_by":{"count":53124504},"followed_by_viewer":false,"edge_follow":

Answer 1

Вы пытаетесь выполнить перекрестный запрос источника без установки заголовка источника. Если заданная конечная точка API поддерживает CORS, то когда в запросе передается заголовок Origin, он отвечает заголовком «access-control-allow-origin».

Я подтвердил, что URL-адрес instagram в вашем вопросе support CORS.

Работает следующий код, использующий API fetch.

fetch('https://www.instagram.com/nasa/?__a=1', { mode: 'cors' })
  .then((resp) => resp.json())
  .then((ip) => {
    console.log(ip);
  });

Вы должны прочитать информацию MDN CORS https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS.

Вот также исправленная версия вашего исходного кода:

const Http = new XMLHttpRequest();
const url = 'https://www.instagram.com/nasa/?__a=1';

Http.open("GET", url);
Http.setRequestHeader('Origin', 'http://local.geuis.com:2000');
Http.send();

Http.onreadystatechange = (e) => {
  if (Http.readyState === XMLHttpRequest.DONE && Http.status === 200) {
    console.log(Http.responseText);
  }
}