Я хочу получить мой 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"
}
Добавьте два заголовка 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");});
}
Решение, которое сработало для меня, заключается в следующем: Я переместил мой файл 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 в публичный каталог.
Я получал ту же ошибку, потому что API просто возвращал строку, однако при вызове fetch я ожидал json:
response => response.json()
Возвращение json из API решило проблему для меня, если ваш API не должен возвращать json, тогда просто не делайте response.json()
Эта ошибка может быть получена, но имейте в виду, что это может быть красная сельдь к реальной проблеме. В моем случае не было проблемы с JSON, так как сообщалось об ошибке, а возникало 404, что он не мог обработать данные JSON для обработки на 1-м месте, что привело к этой ошибке.
Исправление для этого состояло в том, что для использования fetch в файле .json в локальном проекте файл .json должен быть доступен. Это можно сделать, поместив его в папку, например, в папку public в корневом каталоге проекта. Как только я переместил файл json в эту папку, 404 превратился в 200, и ошибка Unexpected token < in JSON at position 0 была устранена.
Это может произойти, когда API (вы потребляете) не отправляет соответствующий JSON. Ответ может восприниматься как страница 404 или что-то вроде ответа HTML/XML.
У меня та же проблема, когда я dotenv getInitialProps process.env.api_url (моя конфигурация конечной точки API) из расширения getInitialProps в getInitialProps. Чтобы избежать проблемы, вы можете избавиться от env там.
В основном это связано с проблемой в вашем приложении React/Client. Добавление этой строки в ваш клиент package.json решает ее
"прокси": " http://localhost: 5000/ "
Примечание. Замените 5000 номером порта, на котором работает ваш сервер.
Ссылка: Как заставить приложение create-реакции-приложение работать с внутренним API Node.js