[REACT] 파일 post application/octet-stream 오류 해결: 클라이언트와 서버 간 데이터 전송 팁

 

 

웹 애플리케이션에서 클라이언트와 서버 간 데이터를 주고받을 때, 특히 파일 업로드와 JSON 데이터를 함께 처리해야 하는 경우, 올바른 Content-Type 설정이 중요하다.

최근 프로젝트에서 FormData를 사용하여 데이터를 서버로 전송하던 중 HttpMediaTypeNotSupportedException: Content-Type 'application/octet-stream' is not supported 오류를 만났다.

이 오류는 클라이언트에서 보내는 요청의 Content-Type이 서버에서 지원하지 않는 형식일 때 발생한다.

이를 해결하기 위해 클라이언트 코드와 서버 간의 데이터 직렬화 및 전송 방식을 수정했다.

 

 

---

 

 

문제 발생

클라이언트에서 FormData를 사용해 데이터를 전송할 때, 객체 데이터를 직렬화하지 않고 추가하거나, 파일 데이터를 함께 처리하면서 올바른 미디어 타입을 설정하지 않아 문제가 발생했다.

서버에서는 @RequestPart로 MultipartFile과 JSON 데이터를 처리하려 했지만, application/octet-stream과 같은 기본 바이너리 타입으로 전송된 데이터가 올바르게 매핑되지 않아 HttpMediaTypeNotSupportedException 오류가 발생했다.

 

 

 

초기 코드

기존 코드에서는 다음과 같이 vo 객체를 그대로 FormData에 추가하고 있었다:

formData.append('vo', JSON.stringify(vo));

 

이 방식은 데이터 직렬화 자체는 올바르지만, 서버가 application/octet-stream 형태의 데이터로 인식해 처리하지 못하는 문제가 있었다.

 

 

 

 

 

 

해결 방법

오류를 해결하기 위해, vo 객체를 JSON으로 직렬화한 후, Blob 객체로 변환하여 Content-Type을 명시적으로 application/json으로 지정했다. 이후 이를 FormData에 추가했다:

 

const json = JSON.stringify(vo); 
const blob = new Blob([json], { type: "application/json" }); 
formData.append("vo", blob);

 

 

코드 결과

최종적으로 수정된 코드는 다음과 같다:

const formData = new FormData(); 
const json = JSON.stringify(vo); 
const blob = new Blob([json], { type: "application/json" }); 
formData.append("vo", blob); 

appendFileIfNeeded('images', postData.image, postData.prevImageId, formData); 
appendFileIfNeeded('files', postData.file, postData.prevFileId, formData);

 

@RequestPart를 통해 JSON 데이터와 파일 데이터를 동시에 매핑할 수 있었다.