ReactJS + Spring Content-Type is not supported 오류 해결 'application/json', 'application/octet-stream

노트북 생활을 청산하고 데스크탑으로 돌아왔다.

 

노트북에서 인텔리제이를 돌리면 발열과 배터리가 감당이 안돼서

어쩔 수 없이 NestJS를 이용해서 테스트를 진행했는데

데스크탑에서는 인텔리제이랑 VSCode랑 크롬이랑

이것저것 다 띄워도 문제가 없기 때문에

이제 가내수공업으로 만든 NestJS 서버는 치워두고

팀원들이 만든 Spring 서버를 사용해서 테스트를 진행할 수 있게 되었다.

 

그동안은 NestJS에서 테스트한 코드를 test 브랜치에 머지하면

팀원들이 pull 해서 직접 테스트를 진행하고

오류를 캡쳐해서 보내줬었는데

이제 직접 테스트하고 수정할 수 있게 되어서 능률이 많이 올랐다.

 

오늘 처음으로 테스트해본 내용은

채팅방 생성 기능이다.

 

우리 프로젝트에서는 채팅방 생성 시 채팅방 제목과 썸네일을 POST하도록 하였는데

아래와 같이 코드를 작성하니 오류가 발생했다.

      axios
      .post("http://localhost:8080/chat/rooms", formData)
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err);
      });

오류의 내용은 Content-Type 'application/json' is not supported 였다.

content type이 json인 것을 지원하지 않는다는 뜻 같은데

그래서 코드를 아래와 같이 수정해줬다.

axios
.post("http://localhost:8080/chat/rooms", formData, {
  headers: {
    "Content-Type": "multipart/form-data",
  },
})

이번에는 아래와 같이

Content-Type 'application/octet-stream' is not supported

오류가 발생했다.

아니 application/json 타입은 지원하지 않는대서 수정해줬더니

이번엔 application/octet-stream 타입을 지원하지 않는다고 하니까

잠시 뭐 어쩌라고 싶었지만

침착하게 코드를 뜯어보니 내가 보낸 roomName과 imageUrl의 Content-Type을

서로 다르게 지정해줘야 정상적으로 POST가 가능한 것 같았다.

 

POST하기 위한 데이터의 Content-Type을 서로 다르게 지정하는 방법은

blob이라는 친구를 사용하면 된다길래 재빨리 적용해보았다.

 

우선 blob에 대해서 간단하게 설명하자면,

내가 POST하고자 하는 데이터의 type을 개별지정해주는 기능을 한다.

 

아래는 blob과 관련된 코드가 포함된 POST를 위한 전체코드이다.

const formData = new FormData();
const changedImgData = new Blob([imgUrl], { type: "multipart/form-data" });
formData.append("image", changedImgData);
const roomData = JSON.stringify({ roomName: roomName });
const changedRoomData = new Blob([roomData], { type: "application/json" });
formData.append("chatRoomDto", changedRoomData);
axios
  .post("http://localhost:8080/chat/rooms", formData)
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.log(err);
  });

우선 FormData를 정의해주고

blob을 이용해서 ImgData와 RoomData의 타입을 개별 지정해주었다.

그리고 blob으로 개별지정한 데이터들을 FormData에 append해주었다.

이후 FormData를 포스트해주었더니 정상적으로 동작했다.