Content Type 을 올바르게 정하기, PayloadTooLargeError 해결

api 통신에 있어서 자주 사용되는 Content Type 을 정리해야함을 느꼈다.

무지성으로 특정 형태의 파일을 base64 형태로 body에 넣어주려고 했다가 PayloadTooLargeError 를 만나버렸다..ㅋㅋㅋㅋ

 

Content Type?

클라이언트에서 브라우저로 파일으 보낼 때, 웹 서버는 HTTP 헤더로 파일이나 자원을 포함하는 바이트 Stream 을 보내게 된다. 즉, 헤더에는 클라이언트와 웹 서버의 커뮤니케이션 사항을 담는 것

이에 따라 보내지는 자원의 Content 타입이 포함되어야 하므로 이는 Content Type 헤더에 의해 지정된다.

 

파일을 업로드할 때,

클라이언트가 웹 브라우저라면 폼을 통하여, 파일을 등록 후 전송하게 된다.

이때 웹 브라우저에서 보내는 HTTP 메시지는 Content-Type 속성이 multipart/form-data 로 지정되고, 정해진 형식에 따라 메세지를 인코딩하여 전송하게 된다고 한다.

이미지 파일을 전송한다고해서 png나 jpg 파일 자체가 전송되는 개념이 아니고 이미지 파일을 문자로 변경하여 HTTP request body에 담아 서버로 전송하는 개념인 것이다.

Request

HTTP Header

Empty

Message Body

 

 

form 태그의 entype 속성

익히 알고 있다시피 name 속성은 서버에 보내질 때 name의 값으로 데이터를 전송하고, action 속성은 서버 url을 넣어주게 된다. method 속성은 get, post 등의 요청 메서드를 지정해준다.

그렇다면 entype 속성은? 폼 데이터가 서버로 제출될 때, 해당 데이터가 인코딩 되는 방법을 명시해주는 속성이다.

• application/x-www-urlencoded
  • default. 모든 문자들을 서버로 보내기 전 인코딩 됨
• text/plain
  • 공백 문자는 + 기호로 변환
  • 나머지 문자는 모두 인코딩되지 않음
• multipart/form-data
  • 모든 문자를 인코딩하지 않고 이미지나 파일을 서버로 전송할 때 사용된다.

 

---

Mutipart Related MIME 타입

MIME : Multipurpose Internet Mail Extensions, 다목적 인터넷 메일 확장 -> 웹을 통하여 여러 형태의 파일을 전달하는데 사용, 인코딩 방식으로 이해할 것

• Multipart/related
• Application/X-FixedRecord

 

 

XML Media 타입

• text/xml
• Application/xml
• Application/xml-external-parsed-entity
• Application/xml-dtd
• Application/mathtml+xml
• Application/xslt+xml

 

Application 타입

모든 바이너리 데이터

• Application/EDI-X12 
• Application/EDIFACT
• Application/javascript
• Application/octet-stream 
  • 8비트 단위의 바이너리 데이터로, 특별히 표현할 수 있는 프로그램이 존재하지 않는 데이터의 경우 기본값으로 사용된다.
  • 알려지지 않은 파일 타입은 해당 타입을 사용해야 한다.
• Application/ogg
• Application/x-shockwave-flash
  • 어도비 플래시 파일 형태
• Application/json 
  • JSON 형태
• Application/x-www-form-urlencode
  • Form 태그 형태
  • 다만 multipart/form-data 와 유사한 폼 형태지만, x-www-form-urlencode 는 대용량 바이너리 데이터를 전송하기엔 비효율적이므로 첨부파일은 multipart/form-data 를 사용해준다.

 

 

오디오 타입

• audio/mpeg
  • MP3, MPEG 등
• audio/x-ms-wma
  • wma : Windows Media Audio
• audio/vnd.rn-realaudio

비디오 타입

• video/webm
• video/ogg

 

Multiprat 타입

모든 종류의 이미지

• multipart/mixed
• multipart/alternative
• multipart/related
• multipart/forme-data
  • 대용량 파일 첨부용

 

 

Text 타입

• text/css
• text/html
• text/javascript
• text/plain
  • 플레인한 텍스트로 만들어 html 태그까지 모두 보여주는 타입
  • 그래픽 표현이 아닌 읽을 수 있는 자료의 문자열만
  • 양식 정보가 포함된 리치 텍스트나 바이너리 파일과는 별개이다.
• text/xml

 

 

File 타입

• application/msword
  • .doc 파일
• application/pdf
  • .pdf 파일
• application/vnd.ms-excel 
  • .xls 파일
• application/x-javascript
  • .js 파일
• application/zip
  • .zip 파일
• image/jpeg
  • jpeg, jpg 등 파일
• text/css 
  • .css 파일
• text/html / Content-Type: text/xml
• text/plain
  • .txt 파일
• text/xsl
  • .xsl 파일

 

 

그렇다면?

일하는데 사용되는 데이터 파일은 dcm 이므로, application/octet-stream 혹은 multipart/form-data 를 사용해줘야 할 것 같다. 다만, 원래 db에 있는 파일의 경우는 form 데이터로 보내줄 필요가 없으므로 octet-stream 을 써야 하지 않을까 싶다.

 

PayloadTooLargeError ?

body-parser 를 사용하여 웹 서버를 구축하고 있는데 request body 에 담긴 내용의 크기가 너무 커서 정상적으로 파싱이 불가한 상태에서 발생하는 에러라고 한다.

기본값으로 100kb까지 파싱이 가능하게 설정되어 있다는데...

서버딴에서 limit 을 조절하여 파싱 허용치를 증가시키거나

app.use(express.json({
	limit: "50mb",
}));

app.use(express.urlencoded({
	limit: "50mb",
    extended: false,
}));

 

body에 담은 파일의 크기를 물리적으로 줄이는 것인데, 통신 데이터 포맷을 변경하여 물리적으로 용량을 줄여야 한다고 한다.

 

결론

다행히도 내가 다루는 파일은 1mb 선에서 가능했다. 하지만 비정상적으로 크기가 큰 파일이라면 데이터 포맷을 다뤄야할 듯 싶다. 며칠 간 File 객체와 Blob 객체를 사용해보려고 삽질했는데... 더욱 자세히 알게된 계기가 된거겠..지?ㅠ