Skip to content

[BE] 클라이언트에서만 발생하는 413 Content Too Large 에러?

Jump to bottom
박경미 edited this page Dec 12, 2023 · 7 revisions

목차

  1. 결론
  2. 이슈
  3. 원인 파악
  4. 트러블슈팅
  5. client_max_body_size 테스트

결론

⭐ Nginx 환경 파일에서 client_max_body_size로 허용하는 request body 크기를 설정하자! ⭐




이슈

클라이언트에서만 발생하는 413 Content Too Large 에러

  • 클라이언트 측에서 API를 붙인 후, 사진 업로드 테스트 시 413 에러가 계속 발생
  • 그러나 Nest에서는 이미지 크기를 최대 10MB까지 허용하도록 설정 
    @UseInterceptors(
    FileInterceptor('image', { limits: { fileSize: 1024 * 1024 * 10 } })
)
  • 게다가 로컬(localhost)로 테스트하면 이미지 업로드 정상 동작



원인 파악

가설1 NCP Object Storage에서의 파일 제한?

  • Postman으로 3MB 사진을 로컬로 전송해도 Nest에 잘 전달됨 (console.log로 찍어봤다)
  • 그러면 Nest에서 Object Storage에 업로드할 때 문제가 발생하는가?
  • Object Storage에서 파일 크기 제한에 대한 별도 설정 ❌

NCP Object Storage API로 업로드할 때 디폴트 파일 크기 제한이 있는가?

No! Object Storage에 약 3MB 이미지도 잘 업로드되었다.

image

가설2 서버에 닿기 전, 클라이언트에서 요청을 보내질 때 막히는 것인가?

  • localhost에서 API 개발 시엔 Postman으로 요청/응답 테스트 진행
  • Postman에서 요청을 생성하여 전달하는 건 문제가 없다고 판단...
  • 클라이언트는 어떤 툴 (Postman, Swagger 등)로 Nest 서버에 요청을 보내시는가? ➡️ 앱 설치된 실기기로 테스트 중

클라이언트에서 API 요청을 보내는 그 툴에서 자동으로 파일 크기 제한이 설정되어 있는가?

(예를 들면 Postman 자체에서 Nest로 API 요청을 보낼 때, 파일 크기 제한이 있어 Request가 전달되지 않는다든가,,,)

그건 아닐 듯! 클라이언트 쪽에서 Postman으로 테스트하여도 에러 반환

image

가설3 API 요청을 받아들이는 Proxy Server (Nginx)의 문제 ✅

가설2 에러 응답을 처음 보자마자 이 가설이 원인이라고 확신했다.

  • Postman으로 테스트하는 클라이언트 분과 내 차이는 딱 1개
    • 나: localhost
    • 클라이언트: server
  • 따라서 나도 실제 배포된 서버로 API 요청을 보내니, 동일한 413 에러 발생 
    <html>

<head>
    <title>413 Request Entity Too Large</title>
</head>

<body>
    <center>
	    <h1>413 Request Entity Too Large</h1>
    </center>
    <hr>
    <center>nginx/1.18.0 (Ubuntu)</center>
</body>

</html>

클라이언트로부터 Request를 받고, Nest 서버로 전달하는 Nginx(proxy server)에서 파일 크기 에러가 발생하는구나❕❗

  • 왜냐하면 에러 응답이 Nest에서 생성하는 JSON 형식이 아니며,
  • <center>nginx/1.18.0 (Ubuntu)</center>라며 대놓고 Nginx의 에러임을 밝히고 있다.



트러블슈팅

Nginx: client_max_body_size (default 1MB)

image

  • Nginx 공식 문서를 뜯어보니, 사용자가 전달하는 Request Body Size 설정 가능
  • 따로 설정하지 않으면 디폴트 1MB 크기 제한 有
  • ... client_max_body_size 초면입니다,,,

Nginx Configuration

image

  • /etc/nginx/sites-enabled/default에 client_max_body_size 10MB 추가

문제 해결, 성공!

image

  • 2.98MB 크기의 이미지 업로드 시에도 정상 동작!



client_max_body_size 테스트

  • 구글링하면 다들 client_max_body_size로 업로드하는 이미지 크기를 제한할 수 있다고 함
  • 그러나 이름에 나와 있듯, 업로드하는 이미지뿐만 아니라 그 외 데이터 필드를 포함한 전체 Body 크기를 제한하는 것 아닌가?
파일 크기 10MB 10MB 업로드 요청
image image
  • 따라서 10MB 이미지로 API 요청 테스트 실행
  • 결과는 413 에러

다들 대충 body size 제한이 image size 제한이라고 퉁쳐서 말하는구나...

  • 내가 원하는, 딱 이미지 자체 사이즈만을 제한하는 프로퍼티는 찾지 못해 아쉽지만
  • 이미지 제외 텍스트 크기는 크지 않을 테니, 나름 10MB 비스무리한 크기의 이미지까지 허용하도록 설정 완료...!

둥글둥글 개발일지

📚 문서

📃 백로그

📁 아카이브

🫶🏻 팀 기록

🔥 우리의 도전

🍎 iOS의 도전

💽 BE의 도전

Clone this wiki locally