[오류 수정기]Content type 'application/octet-stream' not supported

📝문제사항

    /**
     * 먹거리 코스를 생성
     */
    @PostMapping
    public ResponseEntity<?> addCourse(
        @RequestPart("course") @Valid CourseDTO courseDTO,
        @RequestPart(value = "courseImage") MultipartFile courseImage,
        @RequestPart("roots") List<@Valid RootDTO> roots,
        @RequestPart(value = "rootImages") List<MultipartFile> rootImages,
        @AuthenticationPrincipal CustomUserDetails customUserDetails) throws JsonProcessingException {
        
        Course course = courseService.save(courseDTO, customUserDetails.getUsername());
        s3Uploader.uploadCourse(courseImage, course.getId());

        rootService.save(roots, course);
        s3Uploader.uploadRoot(rootImages, course.getId());

        return ResponseEntity.status(HttpStatus.CREATED).body(ResponseDto.of("코스 저장 성공", null));
    }

 

S3와 리액트를 이용한 파일 + DTO를 컨트롤러로 전송받는 것을 구성할 때 일어난 오류이다.

내 예상에서는 둘다 들어와서 편안한게 처리할 줄 알았으나...

 

해당처럼 오류가 발생하였다.

{
    "code": 415,
    "message": "해당 미디어 타입은 지원되지 않습니다: application/octet-stream",
    "data": null,
    "timestamp": "2024-08-16T18:54:06.6324002"
}

 Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/octet-stream' not supported]

 

📝해결방법

해당 오류는 form-data 즉 혼합 데이터 전송 방식에서 자주 일어나는 문제라고 한다.

 

해당 오류는 HTTP 요청에서 Content-Type 헤더가 잘못 설정되었거나, 서버가 해당 Content-Type을 처리할 수 없는 경우 발생한다고 한다. 

 

즉! 들어오는 요청 형태가 잘못되었다!!

기존 타입

        const formData = new FormData();
		// 코스 이미지
        formData.append('courseImage', courseImage);
		// 코스 정보
        formData.append('course', JSON.stringify({
            title: data.title,
            content: data.content,
            category: data.category
        }));
		// 루트 정보
        formData.append('roots', JSON.stringify(data.roots));
		// 루트 이미지
        rootImages.forEach((image) => {
            if (image) {
                formData.append('rootImages', image);
            }
        });

 

기존의 데이터의 문제점은 이미지를 제외한 정보에 대한 타입 설정이였다.

기존에 타입은 밑에 처럼 multipart/form-data로 보냈는데 모든 정보가 저 타입으로 고정되어서

서버가 읽지 못했던 것이였다.

            // POST 요청 보내기
            await axios.post('http://localhost:8080/course', formData, {
                headers: { 
                    'Content-Type': 'multipart/form-data',
                    'access': `${accessToken}`
                }
            });

 

📝해결방법 적용하기

데이터에 대해서 Content-Type : Application/json을 적용해주면 된다.

const formData = new FormData();

// 코스 이미지 추가
if (courseImage) {
    formData.append('courseImage', courseImage);
}

// 코스 데이터 추가 (JSON 문자열로)
formData.append('course', new Blob([JSON.stringify({
    title: data.title,
    content: data.content,
    category: data.category
})], { type: "application/json" })); 

// 루트 데이터 추가 (JSON 문자열로)
formData.append('roots', new Blob([JSON.stringify(data.roots)], { type: "application/json" }));

// 루트 이미지 추가
rootImages.forEach((image) => {
    if (image) {
        formData.append('rootImages', image);
    }
});

 

 

성공!!