multipartForm 415 에러..

이미지 파일 전송을 위하여 multipartForm을 사용하였고,

이미지와 관련된 데이터들을 json 데이터와 함께 서버로 post 요청 하였다.

하지만 .. HttpMediaTypeNotSupportedException 발생.. 뭐지??

컨텐트 타입과 관련된 415 에러였다..

왜 발생한것일까..?

알아보니 byte값을 역직렬화 하는 MultipartResolver에서 스트링 값이 오니 오류가 난 것으로 추측된다.

스프링에서 @RequestPart의 역직렬화는 MultipartResolver로 진행된다.

하지만 나는 서버단에서는 @RequestPart를 사용하고, 클라이언트 단에서는 기존 http 통신을 하듯이 json을 스트링 값으로 보내서 해당 에러가 발생한 것이다.

따라서 @RequestPart 어노테이션을 그대로 쓸 것이라면, json을 blob(Binary Large Object)으로 다시 바꾸어 주면 잘 동작할 것이다.

 @PostMapping(value = "/api/newBook", consumes = {MediaType.APPLICATION_JSON_VALUE,
      MediaType.MULTIPART_FORM_DATA_VALUE})
  public ResponseEntity<BookResponse> createBook(@RequestPart BookAddRequest bookAddRequest,
      @RequestPart("bookImage") MultipartFile bookImage){
      
      .....
  }

이전에 사용했던 코드는 아래와 같았다.

var json = JSON.stringify({
      title: input_title,
      summary: input_summary,
      price: input_price,
      dislike: input_dislike,
      devCourse: input_devCourse,
      junior: input_junior,
      middle: input_middle
    })
formData.append("bookAddRequest", json);
formData.append("bookImage", file);

fetch("http://localhost:8080/api/newBook", {
  method: "POST",
  body: formData,
}).then(()=>{
	....
});

......

그리고 아래는 바꿔준 코드이다.

var json = JSON.stringify({
      title: input_title,
      summary: input_summary,
      price: input_price,
      dislike: input_dislike,
      devCourse: input_devCourse,
      junior: input_junior,
      middle: input_middle
    })
    
//변경된 부분
const blob = new Blob([json], {type: "application/json"});
formData.append("bookAddRequest", blob);
formData.append("bookImage", file);

fetch("http://localhost:8080/api/newBook", {
  method: "POST",
  body: formData,
}).then(()=>{
	....
});

......

다행히 잘 동작했다!ㅎㅎ

출처

'springboot' 카테고리의 다른 글

CORS preflight와 인증 필터 오류 (0)	2023.03.20

출처

'springboot' 카테고리의 다른 글

티스토리툴바