AWS S3와 CloudFront CORS 에러 완벽 해결: 헤더 포워딩 아키텍처

[Troubleshooting] AWS S3와 CloudFront CORS 에러 완벽 해결: 헤더 포워딩 아키텍처

"S3에 폰트와 이미지를 올리고 CORS 정책에 AllowedOrigins: ["*"]까지 완벽하게 세팅했습니다. 그런데 S3 앞단에 CloudFront(CDN)를 붙이자마자, 리액트 프론트엔드에서 No 'Access-Control-Allow-Origin' header is present 에러가 뜨며 리소스가 싹 다 차단됩니다."

정적 리소스를 글로벌 캐시 엣지(Edge)에 태우기 위해 CloudFront를 도입한 데브옵스 엔지니어들이 가장 깊은 절망에 빠지는 3중 네트워크 병목 현상입니다. S3 콘솔에서 아무리 정책을 열어줘도 브라우저는 매몰차게 에러를 뿜어냅니다.

이 에러의 본질은 S3가 아니라 'CloudFront가 중간에서 요청을 가로채고 헤더를 깎아먹는 메커니즘'에 있습니다. 본 가이드에서는 CDN 캐싱 계층과 오리진 스토리지 사이의 단절된 네트워크 컨텍스트를 해체하고, 보안 통행증(Origin 헤더)을 목적지까지 무사히 전달하는 헤더 포워딩(Header Forwarding) 아키텍처를 단호하게 제시합니다.

📌 이 글의 핵심 포인트

  • 헤더 증발의 본질: 캐시 히트율을 높이기 위해 CloudFront가 브라우저의 Origin 헤더를 S3로 넘기지 않고 삭제해 버리는 기본 동작 원리
  • S3의 응답 거부: Origin 헤더를 받지 못한 S3가 CORS 요청이 아니라고 판단하여 Allow-Origin 응답 헤더를 주지 않는 현상
  • 완벽한 해결책: CloudFront 캐시 동작(Cache Behavior)에서 Origin, Access-Control-Request-Headers 등을 허용하는 요청 정책(Origin Request Policy) 설정

1단계: 핵심 원인 분석 - 똑똑하지만 융통성 없는 CDN

웹 브라우저는 리소스를 요청할 때 "나 https://my-website.com에서 왔어"라는 Origin 헤더를 보냅니다. S3는 이 헤더를 보고 자신의 CORS 설정과 비교한 뒤, 통과시켜 줍니다.

문제는 중간에 낀 CloudFront입니다. CloudFront는 전 세계의 요청을 똑같은 캐시 파일 하나로 퉁치기 위해, 사용자의 잡다한 헤더(Origin 포함)를 싹 다 지우고 알맹이(URL)만 S3로 보냅니다. S3 입장에서는 Origin 헤더가 안 오니까 그냥 일반적인 요청인 줄 알고 CORS 관련 응답 헤더(Access-Control-Allow-Origin)를 내려주지 않습니다. 이 응답이 그대로 브라우저로 전달되니 에러가 터지는 것입니다.

2단계: 완벽한 트러블슈팅 - Origin Request Policy (헤더 포워딩)

해결책은 CloudFront에게 "Origin 헤더만큼은 지우지 말고 S3까지 배달해 줘"라고 명시적으로 지시하는 것입니다.

  • AWS CloudFront 콘솔에 접속하여 해당 배포(Distribution)를 클릭합니다.
  • [동작(Behaviors)] 탭을 클릭하고, 기본 캐시 동작을 선택해 [편집]을 누릅니다.
  • 스크롤을 내려 캐시 키 및 원본 요청(Cache key and origin requests) 섹션을 찾습니다.
  • 원본 요청 정책(Origin request policy) 드롭다운을 열고, AWS가 미리 만들어둔 CORS-S3Origin 정책을 선택합니다.
  • [변경 사항 저장]을 누릅니다.

이 설정을 마치면, CloudFront는 브라우저가 보낸 Origin 헤더를 S3에 고스란히 전달합니다. S3는 정상적으로 CORS 응답 헤더를 반환하며, 붉은색 차단 에러는 완벽하게 소멸됩니다.

3단계: 아키텍트의 추가 튜닝 - Invalidation (캐시 무효화)

위 설정을 완료했는데도 여전히 에러가 난다면? 그것은 헤더가 빠진 과거의 '에러 응답' 자체가 CloudFront 엣지에 캐싱되어 있기 때문입니다. 설정 변경 후에는 반드시 CloudFront의 [무효화(Invalidations)] 탭으로 가서 /* 경로로 캐시를 시원하게 날려주어야 변경된 정책이 전 세계 엣지 서버에 즉시 적용됩니다.

💡 핵심 정리 및 마무리

분산 클라우드 아키텍처에서 네트워크 계층이 늘어난다는 것은, 패킷이 목적지까지 도달하는 과정에 수많은 검문소가 추가됨을 의미합니다. S3의 권한만 열어두고 안심하는 1차원적인 시각을 버리십시오. 클라이언트부터 CDN, 그리고 오리진 서버까지 이어지는 데이터의 흐름과 헤더의 생존 여부를 완벽하게 통제하여 멈춤 없는 글로벌 미디어 인프라를 구축하시기 바랍니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

Zapier & Make.com 자동화의 덫: 무한 루프(Infinite Loop) 에러 완벽 방어 아키텍처

Zapier & Make.com 자동화의 덫: 무한 루프(Infinite Loop) 에러 완벽 방어 아키텍처 "주말 사이 자피어(Zapier) 태스크(Task)가 5만 번이나 실행되어 월 요금을 다 소진해버렸습니다." 슬랙(Slack), 지메일(Gmail), 노션(Notion)을 연결하며 업무 해방을 꿈꾸던 B2B 실무자들이 가장 흔하게, 그리고 가장 뼈아프게 겪는 재앙이 바로 무한 루프(Infinite Loop) 에러 입니다. 코딩 지식 없이 직관적인 UI로 파이프라인을 짤 수 있다는 노코드(No-code) 툴의 장점은, 역설적으로 논리적 오류를 잡아내는 '안전장치'가 부재하다는 치명적인 약점이 되기도 합니다. 본 가이드에서는 시스템을 붕괴시키고 예산을 갉아먹는 무한 루프의 발생 메커니즘을 해체하고, 어떠한 상황에서도 시스템이 스스로 폭주를 차단하는 2단계 방어 아키텍처를 단호하게 제시합니다. 1단계: 핵심 원인 분석 (트리거와 액션의 꼬리물기) 무한 루프는 '결과'가 다시 '원인'이 될 때 발생합니다. 가장 대표적인 실무 사례는 양방향 동기화(Two-way Sync)를 시도할 때입니다. 예를 들어, [스프레드시트 A에 새 행이 추가되면(Trigger)] → [스프레드시트 B에 복사하라(Action)] 는 자동화를 만들었다고 가정해 봅시다. 만약 실무자가 B에도 데이터가 추가되면 A로 보내는 역방향 자동화를 하나 더 만든다면 어떻게 될까요? A에 데이터가 들어오는 순간 B로 가고, B에 들어온 데이터는 다시 A를 트리거 시켜 영원히 데이터를 핑퐁 치게 됩니다. 단 10분 만에 1만 건의 태스크가 증발합니다. 또한, 슬랙(Slack)에서 봇이 멘션되었을 때 답변을 다는 자동화에서도, 봇이 단 '답변' 자체를 '새로운 멘션'으로 인식하여 봇 혼자 끝말잇기를 하는 참사도 자주 발생합니다. 2단계: 1차 방어선 - 식별자 필터링(Identi...
자세한 내용 보기

엑셀 보고서의 종말: 구글 스프레드시트와 루커 스튜디오(Looker Studio)로 실시간 대시보드 구축하기

엑셀 보고서의 종말: 구글 스프레드시트와 루커 스튜디오로 실시간 대시보드 구축하기 "김 대리, 이번 달 마케팅 성과 지표 엑셀로 취합해서 오후까지 보고해." 이 한마디에 수많은 실무자는 금요일 오후를 엑셀 셀 병합과 그래프 색깔 맞추기에 쏟아붓습니다. 현대의 비즈니스는 실시간으로 살아 숨 쉬는 '대시보드(Dashboard)'를 요구합니다. 그러나 아직도 많은 기업이 정적인 엑셀 파일에 데이터를 가두어 두고 이메일로 주고받는 원시적인 방식을 고수하고 있습니다. 구글은 이미 이 문제를 해결하기 위해 '루커 스튜디오(Looker Studio, 구 Google Data Studio)' 라는 막강한 무료 시각화 툴을 제공하고 있습니다. 본 가이드에서는 구글 스프레드시트에 쌓이는 날것의 데이터(Raw Data)를 경영진이 한눈에 볼 수 있는 실시간 대시보드로 연동하는 파이프라인과, 이 과정에서 발생하는 치명적인 동기화 에러의 해결책을 단호하게 제시합니다. 1단계: 데이터 정규화(Normalization) - 시각화의 뼈대 루커 스튜디오와 같은 BI(Business Intelligence) 툴을 연동하기 전, 구글 스프레드시트의 데이터 형식을 엄격하게 통제해야 합니다. 초보자들이 가장 많이 하는 실수는 엑셀처럼 표를 예쁘게 보이려고 '셀 병합(Merged Cells)'을 하거나 상단에 '결재란'을 만드는 것입니다. 데이터 시각화 툴은 병합된 셀을 가장 혐오합니다. 1행(Row 1)에는 반드시 데이터의 '이름(필드명: 날짜, 매출액, 담당자 등)'만 존재해야 하며, 2행부터는 빈칸 없이 데이터가 세로로 무한히 확장되는 구조(Tidy Data)를 갖춰야 합니다. 2단계: 루커 스튜디오 연동 및 캔버스 구축 데이터가 정제되었다면, lookerstudio.google.com 에 접속하여 빈 보고서를 생성합니다. '데이터 추가' 창이 뜨면 구글이 제공...
자세한 내용 보기

Docker OOMKilled (Exit Code 137) 에러의 진실: 컨테이너 메모 누수 방어 및 리소스 최적화 아키텍처

Docker OOMKilled (Exit Code 137) 에러의 진실: 컨테이너 메모 누수 방어 및 리소스 최적화 아키텍처 "새벽에 이커머스 결제 컨테이너가 죽어버렸습니다. 로그를 뒤져보니 아무런 에러 코드도 없고 단지 Exit Code 137 하나만 덩그러니 남아있습니다." 도커(Docker)와 쿠버네티스(Kubernetes) 기반의 마이크로서비스 아키텍처를 운영하는 데브옵스(DevOps) 엔지니어들을 가장 공포에 떨게 하는 에러, 바로 OOMKilled (Out of Memory Killed) 현상입니다. 애플리케이션의 버그라면 스택 트레이스(Stack Trace)라도 남아 코드를 고칠 텐데, 이 현상은 범인이 애플리케이션이 아니기 때문에 로그조차 남지 않고 프로세스가 흔적 없이 암살당합니다. 이 미스터리한 살인 사건의 범인은 바로 리눅스 커널(Linux Kernel)의 OOM Killer입니다. 본 가이드에서는 왜 운영체제가 자신이 품고 있는 도커 컨테이너를 가차 없이 죽여버리는지 그 매커니즘을 해체하고, 메모리 누수로 인한 인프라 붕괴를 원천 차단하는 방어 아키텍처를 단호하게 제시합니다. 1단계: 핵심 원인 분석 (Exit Code 137의 의미) 137이라는 숫자는 수학적인 의미를 갖습니다. 리눅스에서 128 + 9 (SIGKILL) = 137입니다. 즉, 누군가 "묻지도 따지지도 말고 즉시 죽어라"라는 9번 시그널(Kill)을 보냈다는 뜻입니다. 도커 컨테이너 내부의 자바(Java), 파이썬(Python) 프로세스가 할당된 메모리(RAM) 한계치를 초과하여 호스트 OS 전체를 멈추게 할 위험이 감지되는 순간, 리눅스 커널은 생존을 위해 가장 메모리를 많이 파먹는 뚱뚱한 컨테이너를 찾아내 단칼에 목을 칩니다. 2단계: 해결책 - Cgroups 리소스 하드 리미트(Hard Limit) 통제 많은 개발자가 "서버 램이 32GB나 되는데 왜 컨테이너가 죽나요?"라고 묻습니다...
자세한 내용 보기