413 CORS 에러?? 문제는 Nginx 설정!

프로젝트를 배포 후 테스트 하던 중 정말 이상한 에러가 보이게 된다.

다른 모든 요청에는 잘 응답하던 api가 어떤 특정한 요청에만 CORS 에러를 뱉는 것.

POST [https://api.~~~.com::ERR_FAILED](https://api.%7E%7E%7Enet::ERR_FAILED/)  413

Access to XMLHttpRequest at 'https://api.~~' from origin 'https://www.~~' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

django CORS 관련 모든 설정들을 마친 상황이었기에, 심지어 어떤 특정한 요청에만 CORS 에러를 뱉는 것이 무척이나 의아했다.

 

이를 해결하는 키는 HTTP 상태 코드에 있었다.

413 에러(Entity Too Large)

HTTP 상태코드 413은 Entity Too Large, 즉 용량이 너무 크다는 것을 의미한다. 그러면 왜 CORS가 뜬거지??

→ Nginx 사용시 400번대, 500번대 오류에 대해서 서버는 Access-Control-Allow-Origin를 응답 헤더에 추가하지 않는다. 그래서 413에러에 CORS 에러가 뜬 것!

→ 즉 핵심은 413에러, 이것을 해결하면 CORS가 해결되는 것이다.

에러가 난 api 요청은 이미지 업로드 요청이었다.

Nginx에서 기본적으로 요청 엔티티의 크기를 1MB로 제한하는데, 업로드 하려는 이미지의 용량이 이것보다 커서 문제가 발생한 것이다.

이 1MB 제한을 늘려야 하는데..

client_max_body_size 늘리기

해결 방법은 간단하다.

nginx.conf에서 client_max_body_size를 증가시키면 된다.

nginx.conf

server { # nginx 서버 정의

  listen 80; # 80포트를 열어주기 (http)
  
  client_max_body_size 10M;
}

배운 점

에러 메시지만 보지 말고 상태코드를 보자!

로컬 서버에서만 돌리던 프로젝트를 배포하고 난 뒤 생긴 첫번째 에러였다.

로컬에서는 잘만 되던게 왜 배포 후에는 안될까? 하며 계속 삽질했던 기억이..

→ 이런 삽질은 그 후에도 계속되었다..

실제 해결방법은 간단했다.

 

도움 받은 블로그 링크!

https://velog.io/@rudwnd33/413-error-cors

CORS, 근데 이제 413 에러를 곁들인...