Если вы кодите на JavaScript, React или любой другой библиотеке/фреймворке JavaScript, вы наверняка сталкивались со следующими ошибками:
SyntaxError: Unexpected token < in JSON at position 0
SyntaxError: Unexpected end of JSON input
Когда возникает эта ошибка?
Эта ошибка возникает, когда вы пытаетесь разобрать строку в JSON, а строка не поддается разбору. Другими словами, она возникает, когда вы передаете недопустимую строку JSON в функцию JSON.parse().
Попробуйте выполнить следующий код в консоли браузера:
JSON.parse("<html>")
Вы увидите следующую ошибку:
Ошибка говорит о том, что в начале строки <, так как правильный JSON должен начинаться с {.
Теперь, если вы выполните следующий код, вы получите вторую ошибку:
JSON.parse('{"html')
Если вы посмотрите на строку JSON, то она начинается как правильный JSON, однако JSON не завершен. Поэтому возникает сообщение «неожиданный конец ввода JSON».
Давайте посмотрим, как мы можем воспроизвести ту же проблему в приложении React:
import { useEffect } from "react"
function App() {
useEffect(() => {
const fetchData = async () => {
const response = await fetch("https://jsonplaceholder.typicode.com/")
const data = await response.json()
console.log({ data })
}
fetchData()
}, [])
return <div className="App">home</div>
}
export default App
Приведенный выше код пытается получить данные из https://jsonplaceholder.typicode.com/ и вызывает response.json(). Когда мы вызываем response.json(), он внутренне вызывает JSON.parse() для преобразования ответа в объект JSON.
Однако URL, который мы передали, является HTML-страницей, и в качестве ответа мы получим HTML-строку. Следовательно, если вы выполните приведенный выше код, он выдаст ошибку: SyntaxError: Unexpected token < in JSON at position 0.
Как исправить эту проблему?
Мы можем решить эту проблему, убедившись, что вызываем правильную конечную точку и получаем правильный JSON-ответ.
Мы можем сделать это, открыв URL в браузере и проверив заголовок ответа content-type:
Тип содержимого HTML
тип содержимого JSON
Если вы проверите content-type конечной точки, которая возвращает правильный JSON, например https://jsonplaceholder.typicode.com/posts, вы увидите content-type как application/json.
Вы также можете проверить, является ли строка корректным JSON или нет в таких инструментах, как JSON Formatter.