어이없는 실수 2 - API 요청 시 Swagger 를 잘 보자 !!

 

 

1. 스웨거에서 이미지 업로드를 할때 key값으로 image를 정의해놨는데 나는 백날천날 file로 해놨던것..!! 

 

---

2. 사용자가 작성한 폼을 POST 요청 보낼때 formData 를 보내야 한다고 생각해서 (아주 어이없는 하ㅏㅎ..) 

headers 의 content-Type : multipart/formData  로 작성했다

 try {
      const response = await axios.post("/라우터 경로", formData, {
        headers: { "Content-Type": "multipart/form-data" },
      });

 

스웨거에서는 application/json으로 요구하고 있었다. 

Content-Type는 서버에 보내는 데이터의 형식을 명시하는 HTTP 헤더

서버가 요청 본문에 포함된 데이터를 어떻게 해석해야 하는지 알려주는 중요한 정보

잘못 설정되거나 누락된다면, 서버가 데이터를 올바르게 파싱하지 못해 요청이 실패하거나 예상치 못한 동작이 발생할 수 있다

 

multipart/formData 은 파일 업로드, 미디어 전송과 같이 데이터를 포함하는 요청에 사용하는 것이고

application/json 은 구조화된 JSON 데이터를 전송할 때 사용하는 형식

 

참고로

x-www-form-urlencoded 은 html form을 통한 POST 전송 방식 중 가장 기본이 되는 content-type 이라고 한다. 

https://wildeveloperetrain.tistory.com/304

 

암튼 이때 브라우저 내부에서 문자열 배열이 FileList 로 되어버려서 엄청 당황했던 기억이 난다 

https://memoryelim.tistory.com/231

File vs FileList (FormData에 문자열 배열을 추가하면 FileList가 된다?)

// multipart/formData 로 했을때
console.log("imageUrls (is FileList):", currentValues.imageUrls instanceof FileList); // true

 

---

API 기능 구현할 때 한번에 시원하게 성공한적이 없어서그런가 

뭐가 잘못된건지 아무리봐도 틀린게없는거같은데~~ 답답한 마음에 약간 패닉이 올때도 있다 ㅎㅎ

이렇게 어이없게 실수했을때는 허탈하기도 하지만 그만큼 해결했을때의 짜릿함이 기분 좋기도 하다

사소한것 같지만 기본을 잘 지키도록 하자!