[ Blob ] formData를 보내는데, 왜 blob으로 감싸니 정상적으로 전송이 되었을까?

 

 

 

내가 서버로 post를 날려야했던건 이미지 파일과 json형식의 데이터였는데

그 중 json형식 데이터를 아래처럼 보내고 있었다.

formData.append("postDto", JSON.stringify(postDto));

 

 

 

그러나 계속 발생했던 500 에러!!!

json형식으로 만들어 보내는 걸 처음하다보니 어느 부분이 문제인지(받는 쪽 설정 문제인지 내쪽 문제인지조차 헷갈렸다)

하지만 백엔드분께서 금방 시원하게도 해결을 해주셨다 ㅎㅎ (최고>_<)!!

 

 

정상적으로 전송이 안되었던 이유는

바로 Blob으로 감싸고 명시적으로 json타입임을 알려주지 않았던 것!!!

 

 

[아래가 blob을 이용해 감싼 코드]

const blob = new Blob([JSON.stringify(postDto)], { // type에 JSON 타입 지정 type: 'application/json', });

 

 

 

 

 

 

나는 서버에 formdata로 데이터를 전송할때 JSON.stringify(postDto) 로만 해도 괜찮다고 생각한 이유가

JSON.stringify를 하면 json형식을 텍스트 타입으로 전환한 거라고 생각했는데,

blob으로 감싸줘야 정상적으로 post전송이 되었던 이유가 뭘까?

 

 

 

 

 

 

 

[기존 코드]

formData.append("postDto", JSON.stringify(postDto));

기존 코드에서는 JSON.stringify(postDto)를 직접 FormData에 추가하고 있었다.

이렇게 하면 postDto 객체가 JSON 문자열로 변환되어 FormData에 포함된다.

그러나 이렇게 FormData에 추가된 JSON 문자열은 서버에서 JSON 형식으로 해석되지 않고 일반 텍스트로 처리될 수 있다고 한다. 

이는 서버에서 예상치 못한 데이터 처리 오류를 발생시킬 수 있다.

=> 따라서 서버가 JSON 형식의 데이터를 예상하고 있다면, JSON 형식의 데이터를 명시적으로 전달해야 했던 것

 

 

 

[수정 코드]

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

 

수정된 코드에선 JSON.stringify(postDto)를 Blob으로 감싸고 있다.

Blob 은 텍스트 데이터나 바이너리 데이터를 다루는 객체인데, Blob을 사용하여 JSON 문자열을 Blob 객체로 변환했다.

그리고 type을 'application/json'으로 지정하여 이 Blob이 JSON 데이터임을 명시하고 있다.

FormData에는 일반적으로 파일 데이터와 텍스트 데이터만 추가할 수 있는데, 

 

 

   JSON 형식의 데이터를 직접 추가하려면 

Blob을 사용하여 텍스트 데이터를 Blob 객체로 변환한 후, FormData에 추가해야 했던 것 !!!

(이렇게 하면 FormData에 포함된 JSON 데이터는 서버에서 JSON 형식으로 올바르게 해석될 수 있다)

 

 

이미지 전송을 할때 blob객체를 사용해서 전송한다는 것은 들었었는데 이렇게 formData에 json객체와 이미지 파일을 함께 보낼때 blob객체를 사용해야 한다는 것을 직접 깨닳을(?) 수 잇어서 정말 좋은 경험이었당