ERROR - Updated 2026-05-14

Unexpected token < in JSON at position 0

Unexpected token < in JSON at position 0 오류가 HTML 응답, 로그인 페이지, 404/500 페이지 때문에 나는지 확인하는 방법.

Unexpected token < in JSON at position 0는 JSON 파서가 응답 첫 글자에서 <를 만났다는 뜻입니다. <로 시작하는 응답은 대개 JSON이 아니라 HTML이므로, API가 실제로 HTML 오류 페이지나 로그인 페이지를 보냈는지 먼저 확인해야 합니다. 이 오류는 JSON 문법 문제보다 라우팅, 인증, 서버 오류, 프록시 설정 문제인 경우가 많습니다.

증상

fetch(...).then(res => res.json())에서 오류가 납니다.
브라우저 콘솔에 Unexpected token < in JSON at position 0가 표시됩니다.
Network 탭을 보면 응답 본문이 <!doctype html> 또는 <html>로 시작합니다.
API 경로라고 생각한 URL이 실제로는 프론트엔드 HTML 페이지를 반환합니다.

원인

JSON 파서는 {나 [로 시작하는 JSON 값을 기대하는데, 응답 첫 글자가 <이면 HTML일 가능성이 큽니다.

상황	가능한 원인	확인 위치
`<!doctype html>` 반환	API URL이 잘못됨	Request URL
로그인 HTML 반환	인증 만료 또는 쿠키 누락	status code, redirect
404 HTML 반환	라우트 없음	path, base URL
500 HTML 반환	서버 오류 페이지	server log
개발 서버 index.html 반환	SPA fallback 또는 proxy 설정	dev proxy config

바로 해결 방법

Network 탭에서 해당 요청을 엽니다.
status code가 200, 401, 403, 404, 500 중 무엇인지 봅니다.
Response 탭에서 첫 글자가 <인지 확인합니다.
Content-Type이 application/json인지, text/html인지 확인합니다.
URL, 인증 헤더, 프록시 설정, 서버 라우트를 차례로 확인합니다.

FixData 도구로 확인하기

JSON Error Doctor에 응답 본문을 붙여넣으면 JSON 문법 오류인지, 아예 JSON이 아닌 텍스트인지 빠르게 구분할 수 있습니다. 응답이 HTML이라면 JSON을 고치는 것이 아니라 API 요청과 서버 응답을 고쳐야 합니다.

개발 중에는 await response.text()로 본문을 먼저 확인한 뒤 JSON인지 확실할 때 JSON.parse() 또는 response.json()을 호출하는 방식이 도움이 됩니다.

수동 해결 방법

응답을 text로 먼저 보기

문제가 나는 동안에는 바로 res.json()을 호출하지 말고 본문을 텍스트로 확인합니다.

const response = await fetch("/api/user");
const text = await response.text();
console.log(response.status, response.headers.get("content-type"), text.slice(0, 200));

응답이 HTML이면 JSON 파싱 코드는 정상이어도 실패합니다.

API URL 확인하기

상대 경로를 쓸 때 /api/users와 api/users는 다르게 해석될 수 있습니다. 배포 환경에서는 base URL, rewrites, proxy 설정도 함께 확인해야 합니다.

인증과 리다이렉트 확인하기

API가 인증 실패 시 JSON 에러가 아니라 로그인 HTML로 리다이렉트하면 이 오류가 납니다. status code가 200이어도 최종 응답이 로그인 페이지일 수 있으므로 request/response history를 확인하세요.

예제

문제 응답:

<!doctype html>
<html>
  <body>Not Found</body>
</html>

코드:

const response = await fetch("/api/profile");
const data = await response.json();

이 경우 해결은 JSON 수정이 아니라 /api/profile 경로가 실제 JSON을 반환하도록 라우트, 인증, 서버 오류를 고치는 것입니다.

자주 하는 실수

Unexpected token <를 JSON 파일 내부의 꺾쇠괄호 문제로만 봅니다.
status code와 Content-Type을 확인하지 않습니다.
로컬 proxy가 API 요청을 프론트엔드 index.html로 돌려보내는 상황을 놓칩니다.
인증 만료로 로그인 페이지가 내려오는 상황을 서버 오류로만 판단합니다.

업데이트 날짜

2026-05-14