ajax 사용시 Content-Type 415 에러

Sol's·2023년 1월 28일
0

오류

목록 보기
17/18

ui를 만들고 게시글 작성을 하는데 에러가 발생했습니다.

처음에는 javascript의 에러확인을 하는방법을 몰라서 헤메다 Console창에서 415에러가 나는것을 확인했습니다.

HTTP '415 지원되지 않는 미디어 유형' 클라이언트 오류 응답 코드는 클라이언트가 보낸 페이로드가 지원하지 않는 형식이기 때문에 서버가 요청을 수락하지 않음을 나타냅니다.
형식 문제는 요청에 표시된 Content-Type 또는 Content-Encoding으로 인해 발생하거나 데이터를 직접 검사한 결과 발생할 수 있습니다.

검색한 결과도 역시 Content-Type이 잘못되면 오류가 발생한다고 나옵니다.

그런데 코드에는 분명 contentType: "application/json; 을 적어주었습니다.

$.ajax({
            type: "POST",
            url: "/api/v1/posts",
            data: JSON.stringify(data),
            headers: {
                contentType: "application/json; charset=utf-8", //보낼 데이터의 정보를 입력
                "Authorization": localStorage.getItem("Authorization"),
                "Authentication": localStorage.getItem("Authorization")
            },
            dataType: "json" //응답받을 데이터의 형태
        }).done(function (resp){ //url에서 반환된 값을 가지고 있는다.
            alert("게시글이 작성되었습니다.");
            console.log(resp)
            // alert(resp)
            location.href="/posts/list"
        }).fail(function (error){
            console.log(error)
            alert(JSON.stringify("토큰이 만료되었습니다. 다시로그인 해주세요"));
            // location.href="/users/login"
        });

여러 시도끝에 contentType을 headers에서 위로 뺴주니 에러가 해결되었습니다.

contentType: "application/json; charset=utf-8", //보낼 데이터의 정보를 입력
            headers: {
                "Authorization": localStorage.getItem("Authorization"),
                "Authentication": localStorage.getItem("Authorization")
            },

하지만 여전히 찝찝한 구석이 있습니다.
왜냐하면 contentType도 역시 헤더이기 때문입니다.
ajax에 대해 더 공부하며 여러 코드들을 보고 나서야 제가 작성한 코드에서는 헤더에 Key:Value 형태로 넣고 있지 않다는 것을 알았습니다.

아래와 같이 코드를 변경하니 header에 contentType을 담아도 에러가 발생하지 않았습니다.

headers: {
                "content-Type": "application/json; charset=utf-8", //보낼 데이터의 정보를 입력
                "Authorization": localStorage.getItem("Authorization"),
                "Authentication": localStorage.getItem("Authorization")
            },

JWT 로그인 처리를 하기위해 Javascript까지 공부하였지만 아직 많이 부족한거같습니다.

javascript에 대해 집중적으로 공부하지 않더라도, 이렇게 UI를 구현할때 조금씩 공부해야겠다고 생각했습니다.

profile
배우고, 생각하고, 행동해라

0개의 댓글