데브옵스
CORS가 캐시를 만났을 때
두줄요약
CDN과 브라우저 캐시가 출처별 CORS 응답을 잘못 재사용해 발생하는 오류를 설명했습니다. CloudFront 캐시 키와 S3 Cache-Control 설정으로 해결 방법을 제시했습니다.
구조와 흐름
- 서로 다른 domain, scheme, port의 리소스 접근 시 Origin 요청 헤더와 Access-Control-Allow-Origin 응답 헤더로 권한 검증
- CDN과 브라우저 로컬 캐시가 Origin 헤더 유무에 따른 서로 다른 CORS 응답을 재사용할 수 있는 구조
문제 상황
- CloudFront 기본 캐시 키가 리소스 URL만 사용하여 다른 출처의 요청에 동일한 S3 CORS 응답 반환
- img·script 요청의 CORS 헤더 없는 브라우저 캐시가 fetch·XMLHttpRequest 요청에도 재사용되어 CORS 오류 발생
해결 방법
- CloudFront 캐시 키 정책에 Origin 헤더를 포함하여 출처별 CORS 응답 분리
- S3 오브젝트 Metadata의 Cache-Control: no-store 설정으로 브라우저 로컬 캐시 재사용 방지
주의할 점
- CORS 문제의 원인 범위로 브라우저 요청 방식, 백엔드 정책, CDN·저장소 캐시 설정 동시 점검
- 정적 리소스 URL 공유 여부와 Origin 헤더 유무에 따른 응답 차이 확인
