FastAPI, Missing boundary in multipart.

목차

 

개요 

FastAPI는 파일 업로드 API를 만들었다. Swagger에서 실제로 API를 호출하여 동작도 체크하고 테스트 코드를 이용해 파일이 업로드되는지 검증도 해봤지만 Front(React)에서 파일 업로드 API 호출 시 "Missing boundary in multipart"라는 Message를 응답받는다는 결과를 알려주었다.

 

원인이 무엇이며 어떻게 해결할 수 있을까?

 

1.  Missing Boundary

"개요"에서 언급한 것 같이 Swagger를 이용해 직접 API를 사용함으로써 동작을 검증하고 테스트 코드를 작성해 파일 업로드 되는지 테스트했다. 기능이 무리 없이 동작하니 개발 서버에 배포했다. 그러나 Front로부터 API서버로부터 "Mssing boundary in multipart"라는 응답과 함께 업로드되지 않는다는 소리를 들었다.

 

 

2. There was an error parsing the body

multipart-form의 boundary에 대한 정보를 Framework마다 다른 형식을 사용하는건지 싶어 boundary 문자열을 직접 생성해 multipart-form 뒤에 붙여서 넣어보시라 말씀드렸다.

이는 pytest를 이용해  django에 POST/PUT 요청을 날리는 코드를 작성할 때 겪었던 사례이기도 해서 관련된 것이지 않을까 싶었다.  그러나 multipart-form 뒤에 boundary 문자열을 생성해 붙인다고 문제는 해결되지 않았고 다른 형태의 Error가 나타났다.

 

multipart-form로 파일을 요청하는 경우우 boundary 문자열은 body 포함되어 요청이 날아가는데 직접 입력한 bounday 문자열은 아무래도 Parsing 단계에서 걸러지나 보다.

 

3.  해결 방법

Missing Boundary와 Parseing the body 와의 씨름 도중 파일 업로드 API 테스트 시에 발생한 Post 요청과 비교해 보면 해결책이 보일 듯싶었다. 테스트 시에 Request Body를 봐도 비교 분석해 볼 만한 포인트는 따로 없었다. Front 개발을 해본 적이 없으니 StackOverFlow를 뒤지기 시작했는데 "Content-Type을 빼고 요청을 해보자"라는 아이디어를 얻게 된 글을 발견했다.

https://stackoverflow.com/questions/14744353/how-to-set-my-own-boundary-on-multipart-form-data-using-xmlhttprequest-and-formd/68080804#68080804

How to set my own boundary on multipart/form-data using XMLHttpRequest and FormData object

 

 

해당 내용을 읽고 Front 코드에서 Fetch 부분에 Content-Type과 Accept를 주석처리하여 보냈더니 API 호출 요청을 성공할 수 있었다.