flask+react app에서 s3로 파일업로드 할때 file size limit 대처 (+nginx, CORS 에러)

문제

flask(백엔드)+react(프론트엔드)로 된 application에서 파일을 업로드 할 때 백엔드로 요청이 가지 않는 문제가 발생

백엔드 서버에서 보이는 에러 메세지:

Access to XMLHttpRequest at '주소A' from origin '주소B' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

---

해결 방법

친절하지 않은 에러 메시지 덕에 어디가 문제인지 찾는지 오래 걸렸다. 그래도 에러를 찾는 데에 도움이 되었던 것은 nginx 설정이 되지 않은 로컬 환경에서는 해당 에러가 발생하지 않지만, nginx 설정이 되어 있는 배포 환경에서 에러가 발생한다는 점이었다. (즉, 어플리케이션 단의 문제가 아닌, 네트워크 단(?)에서 발생한 에러였던 것이다!)

server {
    client_max_body_size 8M;

    //other lines...
}

stackoverflow.com/questions/26717013/how-to-edit-nginx-conf-to-increase-file-size-upload

---

삽질

어디가 문제인지 오래 삽질하였다...

1) CORS 문제?

에러 메시지에 cors라고 되어 있어서 flask의 cors 설정에 문제가 있는 줄 알았다. 

아래처럼 설정이 되어 있는 상태였으나 CORS에러가 났다...

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

그래서 구글링 끝에 아래처럼 config를 추가하라는 답을 보아 시도했으나 역시 안 됐다...

app.config['CORS_HEADERS'] = 'Content-Type'

flask-cors.readthedocs.io/en/latest/

Flask-CORS — Flask-Cors 3.0.10 documentation

 

2) Flask 문제?

flask에 file size limit이 있는건가 싶어 app의 config에 다음처럼 설정을 추가했다.

app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024

역시 안 되었다...

 

3) React Axios 문제?

react에서 axios 라이브러리를 통해 파일을 백로드로 전송하였는데, axios에서 file size limit이 있는것은 아닌지 의심이 되었다...

그래서 아래처럼 파일 사이즈의 maximum을 config 설정해 request를 보낼때 같이 보내도록 하였다..역시 안 되었다..

maxContentLength: Infinity,
maxBodyLength: Infinity

 

stackoverflow.com/questions/58655532/increasing-maxcontentlength-and-maxbodylength-in-axios

Increasing maxContentLength and maxBodyLength in Axios

 

4) S3의 CORS 문제!!?

만약 Application의 문제가 아니라고 생각되면 S3 bucket에 CORS 설정이 되어 있는지도 의심해 봐야 한다! S3에서 곧바로 파일을 전송받기 위해서 S3에서 각 파일에 지정된 URL을 사용하게 되는데, 이때 도메인이 다르므로 CORS 설정을 해주지 않으면 브라우저에서 파일 전송 요청을 거부하게 된다!!! (세상에 마상에 어플리케이션 쪽만 CORS 설정을 해주는 것이 아니라 파일 시스템 쪽에도 CORS 설정을 해줘야 한다니... 전혀 예상 못 했다...)

따라서 S3의 버킷에서 CORS Configuration에서 AllowedOrigin을 수정해줘야 한다!!

깔끔한 파이썬 탄탄한 백엔드 - YES24