jQuery AJAX에서 발생하는 parsererror와 Unexpected token < in JSON at position 0 오류 해결 방법

원주남자
포로그래밍/jQuery
2025. 11. 30.

jQuery로 AJAX 요청을 개발하다 보면 다음과 같은 오류를 자주 보게 됩니다.

parsererror
Unexpected token < in JSON at position 0

두 오류는 표현만 다를 뿐, 실제 원인은 거의 같습니다.
브라우저가 서버에서 받은 응답을 JSON으로 해석하려고 했지만 JSON이 아닌 데이터를 받아서 파싱에 실패할 때 발생하는 오류입니다.

이 글에서는 이 오류가 왜 발생하는지, 흔한 원인과 해결 방법을 정리하겠습니다.

1. 오류가 발생하는 원리

jQuery AJAX에서 dataType을 json으로 설정하면 서버의 응답을 항상 JSON이라고 가정합니다.

예시

$.ajax({
  url: "/api/test",
  method: "POST",
  dataType: "json",
  success: function(result){
    console.log(result);
  }
});

이 상태에서 서버가 JSON이 아닌 HTML이나 텍스트, 또는 오류 페이지를 반환하면 jQuery는 JSON.parse 과정에서 실패하게 됩니다.
특히 응답이 HTML로 시작할 경우 첫 글자가 <이므로 “Unexpected token <” 오류가 발생합니다.

2. 원인 1. 서버가 JSON이 아닌 HTML을 반환한 경우

가장 흔한 원인입니다.
서버에서 JSON 대신 다음과 같은 HTML을 반환하면 오류가 발생합니다.

<html>
    <body
        >error page
    </body>
</html>

유형은 다음과 같습니다.

세션 만료로 인해 로그인 페이지 HTML이 반환됨
서버 오류(500) 페이지가 HTML로 반환됨
JSON을 반환해야 하는 API가 다른 URL로 리다이렉트됨
잘못된 매핑으로 HTML이 그대로 전달됨

해결 방법
서버에서 반드시 JSON을 반환하도록 처리하고, 필요한 경우 예외 상황에서도 JSON 형태로 응답을 보내도록 구성해야 합니다.

3. 원인 2. JSON 문자열 자체에 문법 오류가 있는 경우

서버 코드에서 JSON을 만들었지만 형식이 잘못된 경우입니다.

잘못된 예

{ name: "kim", age: 30 }

올바른 예

{ "name": "kim", "age": 30 }

또는 마지막 쉼표 문제

{ "name": "kim", "age": 30, }

JSON 규칙을 어기면 파싱 오류가 발생합니다.

4. 원인 3. dataType 설정이 잘못된 경우

서버는 텍스트를 보냈는데 프론트에서 dataType을 json으로 강제해두면 오류가 발생합니다.

예시

dataType: "json"

하지만 서버 응답

OK

이 경우 dataType을 제거하거나 text로 변경해야 합니다.

5. 원인 4. CORS 오류로 인해 JSON 대신 HTML 오류 문서를 받은 경우

CORS 문제로 서버가 JSON을 보내지 못하고 HTML 형태의 오류 메시지를 보내는 경우가 있습니다.

이 경우도 HTML이 들어오므로 JSON 파싱 과정에서 오류가 발생합니다.

CORS 정책을 서버에서 정확히 설정해야 합니다.

6. 원인 5. 서버가 JSON Content-Type을 지정하지 않은 경우

서버에서 JSON을 보낼 때 Content-Type 헤더가 누락되면 jQuery가 응답을 제대로 해석하지 못할 수 있습니다.

서버는 다음과 같이 응답해야 합니다.

Content-Type: application/json; charset=utf-8

Spring 예제

return ResponseEntity.ok()
    .contentType(MediaType.APPLICATION_JSON)
    .body(resultMap);

Node Express 예제

res.json({ message: "success" });

PHP 예제

header('Content-Type: application/json');
echo json_encode($data);

7. 해결 체크리스트 요약

parsererror나 Unexpected token < 오류가 발생하면 다음 항목을 체크하면 대부분 해결됩니다.

Network 탭에서 실제 응답 내용이 JSON인지 확인
서버에서 JSON Content-Type을 제대로 설정했는지 확인
jQuery AJAX의 dataType 값을 올바르게 설정했는지 확인
세션 만료나 리다이렉트로 인해 HTML이 응답되고 있지 않은지 확인
JSON 문자열 문법 오류가 없는지 확인
CORS 오류가 발생하여 HTML 오류 페이지를 받고 있지는 않은지 확인

저작자표시 비영리 변경금지 (새창열림)

'포로그래밍 > jQuery' 카테고리의 다른 글

jQuery 플러그인 사용 시 발생하는 TypeError: $(...).xxx is not a function 오류 해결 방법 (0)	2025.11.28
Uncaught TypeError: $ is not a function 오류 해결 방법(가장 흔한 원인 5가지) (0)	2025.11.27
jQuery로 이메일 형식 체크하기(기본~실무) (0)	2025.11.26
[javascript]타이머(timer)함수의 의미와 활용 (0)	2020.12.11
[jQuery] JSON데이터를 활용한 table만들기 (0)	2020.12.10

원주남자