If JavaScript reports Unexpected token '<' while parsing JSON, the input often starts with an HTML page rather than JSON. That can happen when a request reaches a missing endpoint, an error page, or a sign-in page—but the parser message alone does not tell you which. Check the request and response before changing the parser or guessing at the cause.
What the error means
Free tools Windows power users keep installed
One-click scans. No signup required.
JSON.parse() expects text that follows JSON grammar. If the first character is <, the input may begin with an HTML tag, which is not valid JSON; parsing it throws a SyntaxError. See MDN’s JSON.parse() reference.
The message identifies a format mismatch: code expected JSON but received something else. It does not, by itself, prove that the server returned a 404 or identify what happened on the server.
As an Amazon Associate I earn from qualifying purchases.
Why Fetch can make the problem easy to miss
A fulfilled fetch() promise means Fetch received a response; it does not mean that the response has a successful HTTP status. A 404 response, for example, does not automatically reject the promise. MDN notes: “The fetch() function will reject the promise on some errors, but not if the server responds with an error status like 404.” Check response.ok or response.status before trying to parse the body. Read more in MDN’s Fetch API guide.
Recommended Free Tools
How to diagnose the response
- Open the Network panel. Select the failing request and check the requested URL, then note the final URL if the request was redirected.
- Check the HTTP status. In Fetch code, branch on
response.okorresponse.statusbefore callingresponse.json(). - Inspect the content type. Look at the response’s
Content-Typeheader. If the endpoint is supposed to return JSON but the response is labeled HTML, that is a useful clue. MDN documents checking for a JSON content type before consuming a response as JSON in its Fetch API guide. - Read the response body as text. An HTML body may reveal a not-found page, server error, or sign-in page. Use that content together with the status and redirect trail to investigate.
- Parse only after confirming the payload. When the response is the expected JSON, use
response.json()or parse JSON text withJSON.parse(). Both fail if the body is not valid JSON.
A basic Fetch pattern that checks status and content type before parsing looks like this:
#1 Best Overall
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const contentType = response.headers.get("content-type");
if (!contentType?.includes("application/json")) {
throw new TypeError(`Expected JSON, received ${contentType}`);
}
const data = await response.json();This is an example of the documented checks, not a diagnosis of any particular application. The content-type check is intentionally simple; use the response’s actual headers and your endpoint’s contract when deciding what formats it should accept.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Possible causes to verify
- Wrong or missing API path: A mistyped route may return an HTML not-found page. Check the request URL and status.
- Server or gateway failure: An intermediary or server may return an HTML error page. Inspect the response body and status rather than inferring the failure from the parser message.
- Authentication redirect: A request may be redirected to a sign-in page, whose HTML then reaches the JSON parser. Check the final URL, redirect trail, headers, and body.
These are possibilities to investigate, not causes established by the wording of the error. The evidence is the actual request and response. MDN’s guidance on JavaScript’s “Unexpected token” error explains the syntax-error context; the request details determine what your application received.
Quick Recap
Rank #4
Rank #2
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
