Nginx, Express 연결 후 프론트에서 이미지 파일 전송시 408 Error

Access-Control-Allow-Origin 는 허용 하셨나요? app.use(cors({ origin: true, credentials: true }));

CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 에러가 발생한다면 데이터 (이미지 등)이 백엔드에 아예 전달이 안되는 상태입니다. 프론트의 코드나 업로드 방식을 먼저 파악해보시는게 좋을 것 같습니다. (예를 들어 이미지가 아닌 json으로 넣은게 아닌지, 업로드 방식이 옳바른지, 바라보는 주소가 맞는지 등등) Postman 등을 통해 먼저 서버에 다이랙트로 이미지를 찔러보시고 해당기능이 정상 동작하는지 먼저 확인해보시기 바랍니다. 만약 정상 작동한다면 프론트의 코드를 수정해야 하며 정상적으로 들어가지 않는다면 서버의 문제라고 가정하시면 됩니다. 작성하신 내용들이 전부 서버 및 인프라단에서 수정하신 것 같은데 먼저 어느 쪽에서 문제인지 파악하는게 필요할 것 같습니다. 먼저 다음 방법을 시도해보시기 바랍니다. 1. CORS 문제 해결 (하단 코드부분) 2. NGINX 설정 최적화 NGINX에서 큰 파일 업로드를 처리하기 위해 client_max_body_size를 조정하셨으나, proxy_buffer_size, proxy_buffers, proxy_busy_buffers_size 등의 추가적인 버퍼 사이즈 조정이 필요할 수 있습니다. 3. NGINX 로그 문제 해결 408 Request Timeout과 Connection reset by peer 오류는 클라이언트에서 서버로의 요청이 너무 오래 걸리거나 연결이 중간에 끊어져 발생합니다. 이는 파일 업로드 시간이 길거나 네트워크 불안정성 때문일 수 있습니다. proxy_read_timeout 설정을 조정하셨지만, NGINX와 Express 앱 간의 연결이 불안정한 것으로 보입니다. NGINX와 Express 앱 간의 네트워크 연결을 검토하고, 필요하다면 NGINX의 keepalive 설정을 조정해 보십시오. 4. 파일 업로드 미들웨어 검토 multer-s3를 사용하여 파일을 업로드할 때, 미들웨어 설정이 올바르게 구성되었는지 확인합니다. upload.single() 미들웨어를 주석 처리하셨을 때 문제가 해결되지 않았다면, 문제는 multer 설정보다는 앞서 언급된 CORS, NGINX 설정 또는 AWS 구성에 더 깊이 관련되어 있을 수 있습니다. 추가 조치 사항 AWS Security Group과 Network ACLs 설정을 확인하여 EC2 인스턴스로의 인바운드 및 아웃바운드 트래픽이 올바르게 허용되고 있는지 검토합니다. ALB 로그를 활성화하여 요청이 ALB를 통과하여 EC2 인스턴스까지 도달하는지 확인합니다.

1app.use(cors({
2  origin: '프론트엔드 도메인', // 프론트엔드 도메인을 정확히 명시하거나 '*'로 모든 도메인 허용
3  credentials: true, // 쿠키를 포함한 요청을 허용
4  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], // 메소드에 OPTIONS 추가
5}));