Unexpected token '<' / JSON.parse 오류 해결
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
증상
API 응답을 처리할 때 다음 오류가 발생합니다.
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
원인
response.json()으로 파싱하려는 응답이 JSON이 아니라 HTML이기 때문입니다. 주로:
- 잘못된 URL이라 서버가 404/500 HTML 에러 페이지를 반환
- API 경로 오타로 SPA의
index.html이 응답됨 - 인증 실패로 로그인 페이지(HTML)가 돌아옴
즉, "JSON인 줄 알았는데 <!DOCTYPE html>로 시작하는 HTML이 왔다"는 신호입니다.
해결
1) 실제 응답을 먼저 확인
const res = await fetch('/api/data');
const text = await res.text();
console.log(res.status, text.slice(0, 200)); // 무엇이 오는지 확인
브라우저 Network 탭에서 해당 요청의 Response를 직접 보는 것이 가장 빠릅니다.
2) 상태 코드와 content-type 점검
const res = await fetch('/api/data');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const ct = res.headers.get('content-type') ?? '';
if (!ct.includes('application/json')) throw new Error('JSON이 아닌 응답');
const data = await res.json();
3) URL·프록시 점검
경로가 맞는지, 개발 프록시 설정이 올바른지 확인합니다. (관련: CORS 오류)
핵심: 오류는 파싱 지점에서 나지만 원인은 잘못된 응답입니다.
res.json()전에res.ok와 content-type을 확인하세요.