Next.js:FetchError: недопустимое тело ответа json Неожиданный токен <в JSON в позиции 0

Я пытаюсь использовать getStaticProps, чтобы просто сделать запрос, а затем передать эти данные из него в компонент:

Но я получаю такую ​​ошибку:

FetchError: недопустимое тело ответа json на https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR Причина: неожиданный токен <в JSON в позиции 0

import AppliancePackage from '../components/AppliancePackage.jsx';

function HomePage({ data }) {
  return (
    <>
      <AppliancePackage appliances={data} />
    </>
  );
}

export default HomePage;

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries. See the "Technical details" section.

export async function getStaticProps() {
  // Call an external API endpoint to get data.
  // You can use any data fetching library

  var res = await fetch(
    'https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR'
  );

   var json = await res.json();

   data = JSON.stringify(json);
   console.log('data ', data);

  return {
    props: {
      data: json,
    },
  };
}

Я пытался использовать Stringify, но это не сработало! Также меня смущают комментарии:

Эта функция вызывается во время сборки на стороне сервера. Он не будет вызываться на стороне клиента, поэтому вы даже можете выполнять прямые запросы к базе данных. См. Раздел "Технические подробности".

И затем, как вы можете видеть, есть комментарий, в котором говорится:

Вызовите внешнюю конечную точку API, чтобы получать сообщения.

Но есть целый раздел о API маршрутов в их документации

Кто-нибудь может мне помочь, в чем дело?

Обновить

Алексей внес отличное понимание, но, как я сказал ему, я не могу найти в документации по аксиомам изменение пользовательского агента!

Источник

5 ответов

Алексей поставил меня на верный путь! Спасибо, мой друг!

Завелась надо сделать так:

export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library

  var res = await axios.get(
    'https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR',
    {
      headers: {
        Accept: 'application/json, text/plain, */*',
        'User-Agent': '*',
      },
    }
  );
  var res = JSON.stringify(res.data);
  console.log('res ', res);

  // By returning { props: posts }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      data: res,
    },
  };
}

это добавление заголовков:

  headers: {
    Accept: 'application/json, text/plain, */*',
    'User-Agent': '*',
  },

А также * для любого User-Agent

Источник

Я думаю, что конечная точка, о которой вы говорите, по какой-то причине чувствительна к "User-Agent".

Когда я попытался получить его с помощью CURL, как этот, он вернул некоторый ответ HTML (который, конечно, недействителен JSON)

curl https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR

Но таким образом он работал и возвращал JSON, как если бы он был доступен через браузер:

curl -H "User-Agent: some browser" https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR

TL; DR: попробуйте добавить в свой запрос заголовок "user-agent".

Источник

Для меня это было .json()вызывается для ошибок HTTP, возвращающих HTML в теле ответа

Источник

Вместо того, чтобы использовать res.status(200).json(data) в api file, использовать res.status(200).json(JSON.stringify(data)). Это устранит ошибку JSON в консоли. Это сработало для меня.

Источник

я думаю, что данные не были получены с конца, вот почему. я сталкиваюсь с теми же проблемами, я перезапустил свою систему и сеть, и она отлично работает обратно

Источник
Другие вопросы по тегам