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

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

문제

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/

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

from http://june-coder.tistory.com/31 by ccl(A) rewrite - 2021-03-07 17:00:53