JavaScript/JQuery

Jquery Ajax 415 에러(occure Ajax request Error. status code:415, request uri), 400 에러

Z_Z 2022. 7. 26. 13:42
반응형

환경구성 : Spring Boot + Jquery + Thymeleaf
 
Jquery ajax를 통해 Spring Boot Controller로 데이터를 보낼때 415 에러, 400 에러가 났다.
 
결론

1. Controller 로 ajax를 통해 Json 데이터를 보낼땐 String 형태로 보내기

HTTP 프토로콜 요청의 본문(Body) 에 들어가는 데이터는 문자열이어야 한다.

Ajax 또는 Axios 를 통해 요청을 보낼 때 Javascript 객체를 그대로 보낼수는 없고

문자열로 직렬화 해야한다.

 

방법

const user = { name: "홍길동", age: 30 };

axios.post('/api/test', JSON.stringify(user), {
  headers: { 'Content-Type': 'application/json' }
});

// 또는

axios({
	url: '/api/test',
    method: 'post',
    header: {
    	'Content-Type' : 'application/json'
    },
    data: JSON.stringify(user)
}}

 

위 코드처럼 header 에 Content-Type 을 'application/json' 을 설정해서 Spring 에게 JSON 데이터를 보낸다고 알려준다.

또한 데이터 형식을 JSON.stringify() 함수를 통해 String 형태의 JSON 으로 변환해 Spring 의 본문(Body)에

String 문자열로 보낸다.

 

요약
@RequestBody 어노테이션을 사용하여 Model 형태의 객체로 받을경우 Content-Type 을 “application/json” 로 설정 해줘야한다. 또한 json 데이터는 JSON.stringify(json) 을
사용하여 Json String 형태로 변환하여 보낸다.

@RequestParam 어노테이션을 사용하여 데이터를
받을 경우 Content-Type을 "application/x-www-form-urlencoded" 로 설정한다.
기본 Content-Type 이기 때문에 Content-Type을 생략해도 된다.
위 Content-Type은 데이터가 Json 형태가 아닌 Query String 형태로 날라간다.
예시) name=obo&number=123&address=seoul

 

🔁 정리

구분 내용
JSON.stringify() JS 객체 → JSON 문자열로 변환 (HTTP body에 넣기 위해 필수)
HTTP body 항상 문자열로 전송됨
@RequestBody JSON 문자열을 Java 객체로 파싱
필요조건 JSON 문자열 + Content-Type: application/json

 

 

1. List Model 형식으로 데이터를 보냈으며 에러는 보낼때 Content-Type 설정을 안했다. (415 Error)

 
- 보낼 데이터 형식

위 List 형 Json 데이터를 Controller로 보냈다. 하지만 415 Error 와 함께 보내지지 않았다.
data 는 제대로 json 형태의 String 문자열로 보냈다.
이유는 보내는 데이터의 Content-Type의 미설정으로 인해 서버가 어떠한 데이터인지 이해하지 못해 발생하는 에러다.

아래의 이미지는 ajax를 통해 데이터를 보낼때의 헤더이다.
Content-Type 이 json 형태가 아니라서 서버가 이해하지 못했다.

 
아래와 같이 content-Type 을 설정해줘야 한다.
* contentType: "application/json; charset=utf-8"

 

2. 또한 data 형식을 json 형태의 String 문자열로 보내지 않으면 400에러가 난다. (400 Error)

- 보낼 데이터 형식

위 List 형 Json 데이터를 Controller로 보냈다. 하지만 400 Error 와 함께 보내지지 않았다.
데이터 자체를 전송할 때 Json 형태의 String 문자열로 보내야 서버가 제대로 받을 수 있었다.
 

 
아래와 같이 data를 보낼때 Json 데이터를 String 문자열로 변환하여 보내야한다.
* JSON.stringify(보낼 Json 형태의 data)

 

반응형