Uncaught SyntaxError: Unexpected token < in JSON at position 0

et cetera/Trouble Shooting 2021. 4. 24. 21:21

■ 에러 로그

■ 상황

백엔드 크루가 '분명히 데이터를 fetch하고, json() 메서드를 사용해서 파싱을 해줬는데 body를 볼 수가 없다'

라고 자바스크립트 관련 질문을 해왔다. 자바 코드를 살펴보니, 서버 쪽에서 500 에러와 함께

'중복된 이름이 존재한다' 라는 에러 메시지를 body에 담아서 보내고 있었다.

그리고 프론트에서 fetch를 받아와서 response.json() 형태로 파싱을 해주는 과정에서 해당 에러가 발생했다.

■ 에러 상세

백엔드쪽에서 메시지를 단순 '텍스트'로 보내주고 있었다.

(JSON 형태를 갖추지 못한 일반 텍스트. 그냥 '중복된 이름이 존재합니다' 라는 텍스트를 그대로 보내주고 있었음)

그냥 텍스트로 데이터가 날아오는데, 프론트에서 response.json()으로 파싱을 해주려고 하니

'JSON 형태가 아닌 데이터를 JSON 메서드로 파싱할 수 없다' 라는 이유로 발생하는 오류인 듯 하였다.

보통 데이터 형식에 맞지 않는 방법으로 변환을 하려 할 때 발생하는 에러인 듯.

🙄 이번 케이스처럼, 단일 텍스트만 보내주고 있는데 받는 쪽에서 response.json()으로 변환해주려는 경우

💡 그냥 텍스트만 보내주는 경우, 받는 쪽에서는 그냥 response.text()로 변환을 해주면 된다.

이 경우, "Uncaught SyntaxError: Unexpected token 중 in JSON at position 0" 처럼

보낸 문자열의 맨 처음 문자가 에러 메시지에 표시된다. 그래서 알아보기 쉬움.

🙄 보내는 쪽에서 실수로(?) JSON.parse를 해서 보냈고, 받는 쪽에서 또 response.json()을 사용하는 경우

🙄 혹은, 보내는 쪽에서 JSON 형식으로 변환을 하지 않고 데이터를 보냈는데
(@ResponseBody Annotation을 빼먹는다거나), 받는 쪽에서 response.json()을 사용하는 경우

💡 보통 이 경우에 제목과 같은 '<'를 포함한 에러 메시지가 발생하는 경우가 많은 듯.

AJAX 요청에 대한 응답이 JSON 데이터가 아니라 <html> ... </html> 형태 그대로 날아와서

맨 앞의 '<'를 읽다가 에러가 발생하여 그것을 에러 메시지에 담아서 보여주는 듯 하다.

🙄 {"answer":10} 형태로 문자열이 들어가야 하는데, {answer:10}의 형태로 들어가는 경우

💡 요건 잘 모르지만, 자바에서 Map을 @ResponseBody를 통해 return받는 경우

{answer:10}같은 형태로 텍스트가 받아질 수도 있다고 한다. 그래서 'ObjectMapper'를 사용하면 된다는 듯.

혹은 오타가 있다거나..

■ 느낀 점

백엔드에서 날아오는 데이터를 JSON 형식으로 밖에 받아본 적이 없었어서,

text()라는 메서드가 존재하는지 조차도 모르고 있었다. 다시 한 번 기본기의 부족을 느낀다.

Parcel의 Cannot find module './style.module.scss' or its corresponding type declarations. 에러 (2)	2022.01.17
click 이벤트보다 blur 이벤트가 먼저 발생하는 문제 (0)	2021.12.24
모바일에서 Webpack-dev-server에 접근하지 못하는 문제 (0)	2021.09.30
Webpack cli가 종료되지 않는 문제 (4)	2021.09.24
fetch API 사용 시 headers가 비어있는 문제 (3)	2021.06.11

Hakunamatata Hakunamatata