React Js: Uncaught (в обещании) SyntaxError: Неожиданный токен <в JSON в позиции 0

Я хочу получить мой Json файл в js-ответах, для этого я использую fetch. Но это показывает ошибку

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Что может быть ошибкой, я не понимаю. Я даже подтвердил свой JSON.

handleGetJson(){
  console.log("inside handleGetJson");
  fetch(`./fr.json`)
    .then((response) => response.json())
    .then((messages) => {console.log("messages");});
}

Мой Json (fr.json)

{
  "greeting1": "(fr)choose an emoticon",
  "addPhoto1": "(fr)add photo",
  "close1": "(fr)close"
}

Ответ 1

Добавьте два заголовка Content-Type и Accept равным application/json.

handleGetJson(){
  console.log("inside handleGetJson");
  fetch(`./fr.json`, {
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }

    })
    .then((response) => response.json())
    .then((messages) => {console.log("messages");});
}

Ответ 2

Решение, которое сработало для меня, заключается в следующем: Я переместил мой файл data.json из src в публичный каталог. Затем использовал API извлечения для извлечения файла.

fetch('./data.json').then(response => {
          console.log(response);
          return response.json();
        }).then(data => {
          // Work with JSON data here
          console.log(data);
        }).catch(err => {
          // Do something for an error here
          console.log("Error Reading data " + err);
        });

Проблема заключалась в том, что после компиляции приложения реакции запрос на выборку ищет файл по URL-адресу "http://localhost:3000/data.json", который фактически является общедоступным каталогом моего приложения реакции. Но, к сожалению, при компиляции файла реакции приложение data.json не перемещается из src в публичный каталог. Поэтому мы должны явно переместить файл data.json из src в публичный каталог.

Ответ 3

Я получал ту же ошибку, потому что API просто возвращал строку, однако при вызове fetch я ожидал json:

response => response.json()

Возвращение json из API решило проблему для меня, если ваш API не должен возвращать json, тогда просто не делайте response.json()

Ответ 4

Эта ошибка может быть получена, но имейте в виду, что это может быть красная сельдь к реальной проблеме. В моем случае не было проблемы с JSON, так как сообщалось об ошибке, а возникало 404, что он не мог обработать данные JSON для обработки на 1-м месте, что привело к этой ошибке.

Исправление для этого состояло в том, что для использования fetch в файле .json в локальном проекте файл .json должен быть доступен. Это можно сделать, поместив его в папку, например, в папку public в корневом каталоге проекта. Как только я переместил файл json в эту папку, 404 превратился в 200, и ошибка Unexpected token < in JSON at position 0 была устранена.

Ответ 5

Это может произойти, когда API (вы потребляете) не отправляет соответствующий JSON. Ответ может восприниматься как страница 404 или что-то вроде ответа HTML/XML.

Ответ 6

У меня та же проблема, когда я dotenv getInitialProps process.env.api_url (моя конфигурация конечной точки API) из расширения getInitialProps в getInitialProps. Чтобы избежать проблемы, вы можете избавиться от env там.

Ответ 7

В основном это связано с проблемой в вашем приложении React/Client. Добавление этой строки в ваш клиент package.json решает ее

"прокси": " http://localhost: 5000/ "

Примечание. Замените 5000 номером порта, на котором работает ваш сервер.

Ссылка: Как заставить приложение create-реакции-приложение работать с внутренним API Node.js