[Ajax] status 200인데 parse error..?

틀린 부분에 대한 지적은 언제든 환영입니다👍

문제 발생

오늘의 포스팅은 spring framework에서 restcontroller를 Ajax와 함께 사용하는중 발생한 error에 관한 내용입니다. Form데이터를 json 형태로 변환한 후 ajax를 이용하여 restcontroller에 내용 전송 후 HttpStatus.OK를 리턴한 상황입니다.

Ajax code

$('#create').on('click',function () {

    var formData = $('#form').serializeObject();
  
    $.ajax({
        url: 'api/users',
        type: "POST",
        data: JSON.stringify(formData) ,
        contentType: "application/json; charset=utf-8;",
      	dataType: "json",
        success:function () {
            alert("추가 성공");
        },
        error: function (error,textStatus) {
            alert("추가 실패");
            console.log(error);
            console.log(textStatus);
        }
    })
});

Rest controller

@RequestMapping(value = "/users",method = RequestMethod.POST)
public ResponseEntity<Void> createUser(@RequestBody User user){
                                   
        ......

        return new ResponseEntity<Void>(headers,HttpStatus.OK);
}

근데 결과는.... "추가 실패"
엥? 분명 createUser 기능까지 정상적으로 작동되었는데 success가 아닌 error 함수가 실행되었습니다. textStatus로 error 종류를 출력해보니 "parseerror" 였습니다.

해결

처음에는 rest controller에서 넘겨받는 json 데이터가 문제라고 생각했습니다. 그러나 이 생각은 잘못되었다는것을 깨달았습니다. 문제는 createUser 메소드의 return 값을 보고 알게되었습니다.

return new ResponseEntity<Void>(headers,HttpStatus.OK);

return 문에서 200 status code와 함께 header 값만 반환합니다. 즉 body부분은 비어있는 채로 리턴하죠. Ajax 코드에서 살펴보시면 dataType : 'json'가 있습니다. Ajax가 생각하는 반환 형태는 json인데 실질적으로 넘어오는 반환값은 단순 header 값 입니다. 반환값의 불일치로 발생하는 에러였습니다.

해결방법
-> dataType : 'json'를 지워버린다.