사건
프로젝트 진행 중 fetch api를 사용하여 multipart/form-data를 보내는데 서버에서 제대로 받지 못하는 이슈(자바/스프링에서 boundary exception이 발생)가 생겨 fetch에 대해 살짝 공부를 하게되었다.
excetipn 문구는 다음과 같다.
The request was rejected because no multipart boundary was found in springboot
게시판 등록 시 이미지를 첨부하여 저장하기 위해 파라미터를 form-data를 생성하여 넣어주고 header의
content-type을 multipart/form-data로 설정하여
보냈는데 서버에서 500 에러가 발생 구글 서칭을 해보니
FormData 객체의 Default Content-Type이 multipart/form-data이고, 웹브라우저에서 파일 전송 시 자동으로 boundary 값을 붙여주기 때문에 프론트엔드에서는 따로 Content-Type을 설정해주면 서버에서 받을 수 없다.(자바/스프링 기준)
페이로드값을 확인해보니
Content-Type을 multipart/form-data로 설정한 경우
아래 처럼 보내졌고
--12345
Content-Disposition: form-data; name="sometext"
some text that you wrote in your html form ...
--12345
Content-Disposition: form-data; name="name_of_post_request" filename="filename.xyz"
content of filename.xyz that you upload in your form with input[type=file]
--12345
Content-Disposition: form-data; name="image" filename="picture_of_sunset.jpg"
content of picture_of_sunset.jpg ...
--12345--설정을 안한 경우에는 일반적인 페이로드 값으로 보내졌다.
참고사이트
감사합니다
https://github.github.io/fetch/
https://aljjabaegi.tistory.com/641
https://stackoverflow.com/questions/36005436/the-request-was-rejected-because-no-multipart-boundary-was-found-in-springboot
https://os94.tistory.com/125
