S3에 적용한 CORS를 CloudFront 에 적용하는 방법

S3에 Static한 데이터를 저장해서 사용하다 보면 JS파일 들도 사용하게 되는데, 이 경우 브라우저에서 서로 다른 도메인으로 인하여 CORS(Cross-Origin Resource Sharing)문제가 발생 한다.
이런 경우 S3 CORS 설정에서 필요한 도메인에 대하여 접근을 허용 해주면 된다. 하지만, S3에 Cloud Front를 붙여서 사용한다면, 반드시 CORS 관련 해더 값을 Cloud Front에서 S3까지 전달 될 수 있도록 요청 헤더에 대하여 전달을 허용 해주어야 한다.

설정 하는 방법은 매우 간단하다.
Behavior 설정에서 Cache Based on Selected Request Headers를 Whitelist로 변경하고 아래 3개의 해더값을 허용하면 된다.

Access-Control-Request-Headers
Access-Control-Request-Method
Origin


이렇게 설정하게 되면 S3에 설정한 CORS 설정되로 사용이 가능하다.