Почему не удается получить данные с помощью fetch с localhost?

Question

[Кирилл]

Есть проект на nextjs, хочу получать данные для страниц через fetch запрос к локальному json/js файлу.

Код запроса в компоненте страницы:

export async function getServerSideProps(context) {
  const res = await fetch(`http://localhost:3000/api/product`)
  const json = await res.json();
  console.log('json', json)
  return {
    props: {data}
  }
}

получаю такую ошибку

в json файле что-то типа такого:

{
      "elements": [
        {
          "name": "Доставка",
          "url": ""
        },
        {
          "name": "Оплата",
          "url": ""
        },
        {
          "name": "Возврат",
          "url": ""
        }
      ],
      "title": "Покупателям"
    }

В чем проблема и как правильно получить данные?

Comments

[Петр]

Попробуйте в запрос добавить header - 'Content-Type': 'application/json'

Answer 1

[Кирилл]

получилось решить. Сначала поправил путь, 404 пропала, но вывод в консоли html остался. В документации next js нашел пример использования rest router api, там после объекта с данными была такая запись:

export default function handler(req, res) {
  res.status(200).json(product)
}

Сам запрос:

export async function getServerSideProps() {
  const res = await fetch(`http://localhost:3000/api/product`)
  const data = await res.json()
  return {
    props: {product} 
  }
}

И все заработало.

Всем спасибо. Очередной пример, что нужно читать документацию, а не доставать глупыми вопросами умных людей.

Answer 2

[Надим]

Очевидно у вас кривой JSON. Очень похоже, что вы пытайтесь распарсить не JSON, а JavaScript-запись объекта. Попробуйте использовать eval() для чтения объекта.

Comments

[Kovalsky]

Не, очень похоже что localhost:3000/api/product отдает хтмл страницу. А этому причин может быть миллион

[Надим]

Kovalsky, ну так откройте консоль браузера и посмотрите ответ, введите в консоли:

otvet = await (await fetch('http://localhost:3000/api/product')).text();
console.log(otvet);

[Kovalsky]

Надим Закиров, не, я просто прокомментировал, не более. Подчеркнул что версия "похоже, что вы пытайтесь распарсить не JSON, а JavaScript-запись объекта" неправдоподобна учитывая что "unexpected token < in json at position 0", и всё

[Надим]

Kovalsky, извиняюсь, я почему-то думал это автор вопроса мне отвечает)

[Кирилл]

Надим Закиров, ввел.

Вот ответ

Выходит и правда что в ответе html, как сказали Василий и Kovalsky. Как это можно поправить? Формат json точно верный (ради эксперимента вставил другой json, ответ тот же).

[Надим]

Кирилл, а вы уверены, что ссылка правильная? Что показывает если просто вбить в браузере адрес?
http://localhost:3000/api/product
Потому что судя по коду ошибки (404) - такого адреса не существует.

[Кирилл]

Надим Закиров, получилось решить. Сначала поправил путь, 404 пропала, но вывод в консоли html остался. В документации next js нашел пример использования rest router api, там после объекта с данными была такая запись:

export default function handler(req, res) {
  res.status(200).json(product)
}

Сам запрос:

export async function getServerSideProps() {
  const res = await fetch(`http://localhost:3000/api/product`)
  const data = await res.json()
  return {
    props: {product} 
  }
}

Всем спасибо. Очередной пример, что нужно читать документацию, а не доставать глупыми вопросами умных людей.

Answer 3

[Василий Банников]

Видимо на самом деле приходит в ответе не json, а html, о чём говорит наличие <
Может быть там сервер редиректит на какой-нибудь login page ли там аналогичная ошибка возникает.

Answer 4

[Александр Черемхин]

Для начала надо ошибку обработать.
Что у вас там сервер отвечает никому не известно.