CORS 체크를 확인했음에도, 테스트 서버에 배포 후 가끔씩 테스트를 하다 보면 CORS 오류가 나곤 한다.

많은 이유가 있겠지만, 내가 지금까지 개발을 하면서 느낀 몇 가지 이유는 다음과 같다.

🤷🏻‍♂️ 내가 느낀 CORS가 나는 몇 가지 이유

1️⃣ .gitignore 파일을 서버에다 최신화하지 않았다. (즉 개발할 때와 배포 시의 .gitignore 파일이 다른 것)

2️⃣ 1번과 비슷한데, 라이브러리(패키지)들이 최신화되지 않았다.

3️⃣ 외부 API를 잘못 사용했다. (ex, 소셜 로그인 시)

4️⃣ 마지막으로 파일 업로드 시에 서버단(Nginx)에서 파일의 크기 제한이 걸려 CORS 오류가 나는 경우이다.

그 중, 이번에 4번에 해당하는 에러가 나서 글을 작성해 보려고 한다.

📝 해결 방법

나는 EC2(Ubuntu)를 사용 중인데,
/etc/nginx/nginx.conf 라는 파일에 가보면

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
        worker_connections 768;
        # multi_accept on;
}

http {
        ##
        # Basic Settings
        ##
        
        client_max_body_size 10M;
        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;
        ~~ 이하 생략 ~~

이러한 내용이 있는 것을 볼 수 있다.

여기서 http 안의 내용들을 보면
client_max_body_size 10M; 라는 부분이 보이는데,
이 부분이 바로 서버 자체에서 어느 정도 크기의 파일을 받아들일 것인지 작성해 주는 부분이다.

❗️ 처음에는 해당 Line이 없을 것이고, Default가 1MB(1024KB)이다.

웬만한 jpg나 png 파일은 kb 단위라 문제가 없이 업로드가 되지만,
스크린샷이나 화질이 높은 사진들은 기본 3~4MB 정도 되어서 CORS 오류가 나 제한을 풀어줘야 한다.

❗️ 주의

파일을 수정하고 nginx에 적용을 하려면 몇 가지 확인 사항이 필요하다.

1️⃣ 먼저 해당 nginx.conf 파일의 문법이 제대로 이루어졌는지 확인을 해야 하는데,
해당 명령어는 다음과 같다.
sudo nginx -t

2️⃣ 문제가 없다면 nginx를 재실행 해준다.
sudo systemctl restart nginx

3️⃣ 재실행 후, 문제가 없는지 Nginx의 상태를 확인해 준다.
sudo systemctl status nginx

문제가 없이 잘 적용이 되었다면 다음과 같은 화면을 볼 것이다.