[Ajax] 200 response을 받았지만 ajax fail, error가 발생하는 문제

 

문제 상황:

로그인 Spring Security + JWT을 이용하여 구현하던 중

Ajax로 응답결과로 "로그인 성공"에 관한 메시지, 토큰값을 받았지만 .error 부분 .fail 메소드가 실행되는 현상이였다.

 

수정 결과:

응답결과로 dataType을 적어주지 않아서 발생한 문제였다.

dataType은 response을 받을때 어떤 타입으로 받을지 지정하는곳이다.

ajax 코드에 dataType = "text" 수정해주니 정상적으로 .success .done 메소드가 실행되었다.

---

문제가 되었던 ajax코드

$.ajax({
            type: "POST",
            url: `/api/user/login`,
            contentType: "application/json",
            data: JSON.stringify({userId: username, password: password}),
        })
            .done(function (res, status, xhr) {
                console.log(xhr);
                alert('Login Success!')
                const token = xhr.getResponseHeader('Authorization');
                document.cookie = 'Authorization=' + token + '; path=/';
                $.ajaxPrefilter(function (options, originalOptions, jqXHR) {
                    jqXHR.setRequestHeader('Authorization', token);
                });
                window.location.href = host;
            })
            .fail(function (jqXHR, textStatus) {
                const errorMessage = jqXHR.responseText;
                alert(`Login Fail: " ${errorMessage}`);
            });

 

수정 후 ajax 코드

$.ajax({
            type: "POST",
            url: `/api/user/login`,
            contentType: "application/json",
            data: JSON.stringify({userId: username, password: password}),
            dataType: "text"
        })
            .done(function (res, status, xhr) {
                console.log(xhr);
                alert('Login Success!')
                const token = xhr.getResponseHeader('Authorization');
                document.cookie = 'Authorization=' + token + '; path=/';
                $.ajaxPrefilter(function (options, originalOptions, jqXHR) {
                    jqXHR.setRequestHeader('Authorization', token);
                });
                window.location.href = host;
            })
            .fail(function (jqXHR, textStatus) {
                const errorMessage = jqXHR.responseText;
                alert(`Login Fail: " ${errorMessage}`);
            });