피드로 돌아가기
Dev.toInfrastructure
원문 읽기
Browser-level CORS 제약 해결을 통한 S3 데이터 렌더링 정상화
200 OK… But Nothing Loaded, My CORS Debugging Story
AI 요약
Context
하드코딩된 데이터를 Amazon S3 기반 JSON 파일로 분리하며 인프라 구조 변경. Vercel 기반 Frontend와 S3 간의 Origin 불일치로 인해 브라우저단에서 응답 데이터 접근이 차단되는 병목 발생.
Technical Solution
- Browser-enforced CORS 메커니즘 분석을 통한 200 OK 응답과 데이터 접근 불가 현상의 인과관계 파악
- AWS Console 수동 설정 대신 Terraform을 도입한 Infrastructure as Code(IaC) 기반 CORS Policy 관리
- S3 Bucket 설정 내 Access-Control-Allow-Origin 헤더에 Frontend 도메인을 명시하여 Cross-Origin 요청 허용
- Browser Cache로 인한 설정 반영 지연 문제를 Hard Refresh를 통해 검증 및 해결
실천 포인트
- HTTP 200 응답에도 UI 렌더링 실패 시 DevTools의 Network 탭에서 CORS 헤더 존재 여부 확인 - 인프라 설정 변경 후 반영되지 않을 경우 Browser Cache 가능성을 고려한 Hard Refresh 수행 - 반복 가능한 환경 구축을 위해 S3 CORS 정책과 같은 인프라 설정을 Terraform으로 코드화