If you are working with APIs or fetching data in JavaScript, you have likely encountered the frustrating 'Uncaught SyntaxError: Unexpected token < in JSON at position 0'. This error is a classic for beginners and even experienced developers, usually occurring when your code expects a JSON object but receives an HTML document instead.
The character '<' is the opening bracket of an HTML tag (like <!DOCTYPE html> or <div>). This guide will help you identify why your server is sending HTML instead of JSON and how to fix it.
Step 1: Verify the API Endpoint URL
The most common cause of this error is a wrong URL. When you request a resource that doesn't exist, many servers (especially those using React, Vue, or Blogger) will return a 404 Error page in HTML format. Since the first character of an HTML file is '<', JSON.parse() fails immediately.
- Double-check for typos in your fetch URL.
- Ensure you are using https:// if the server requires a secure connection.
- If using relative paths (e.g., /api/data), ensure your development server is configured to proxy these requests correctly.
Step 2: Inspect the Network Response
To see exactly what the server is sending back, use your browser's Developer Tools:
- Press F12 or Right-click and select Inspect.
- Go to the Network tab.
- Refresh your page to trigger the request.
- Click on the failed request and look at the Response tab.
- If you see HTML code instead of JSON ({}), you have confirmed that the source of the problem is the server's output, not your JavaScript logic.
Step 3: Check the 'Content-Type' Header
Sometimes the server sends the correct data but doesn't tell the browser it is JSON. Or, your request might be missing the header that tells the server you want JSON in return. In your fetch() options, ensure you are setting the headers correctly:
Example:
fetch('https://api.example.com/data', { headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' } })Step 4: Handle Server-Side Errors and Redirects
If your server encounters an internal error (500 Internal Server Error), it might serve a default error page in HTML. Similarly, if your API requires authentication and you aren't logged in, it might redirect you to a login page (HTML).
- Check your server logs to see if there is a crash.
- Ensure your API keys or Auth Tokens are correctly included in the request headers.
Step 5: Use a Try-Catch Block for Better Debugging
To prevent your entire script from breaking when this error occurs, wrap your parsing logic in a try...catch block. This allows you to log the raw text and see what went wrong.
const response = await fetch(url); const text = await response.text(); // Get response as text first try { const data = JSON.parse(text); console.log(data); } catch (err) { console.error('Failed to parse JSON. Server returned:', text); }By logging the text variable in the catch block, you will see the exact HTML that caused the 'Unexpected token <' error, making it much easier to debug the root cause.
💡 Pro Tip: Keep your software updated to avoid these issues in the future.
Category: #Website