CloudFront 배포 JS 파일에 CORS 헤더 추가하기

Context

cloudFront로 서빙 중인 dev 환경 프로덕트가 갑자기 브라우저에서 로딩이 안 됨

What I Learned

확인해 보니 JS 파일에 CORS 헤더가 없어서 발생한 문제.

CORS 헤더는 HTML이 아니라 JS 파일 응답(Response) 자체에 붙어야 함. CloudFront에서 JS를 서빙할 때 응답 헤더에 Access-Control-Allow-Origin: *가 없으면 브라우저가 스크립트 로드를 차단.

-> 해결 방법: CloudFront > distribution > behaviors > Response Headers Policy 설정