워드프레스의 W3 Total Cache 를 사용하면서 CDN 을 AWS 의 CloudFront 설정으로 변경하였는데,

일부 파일이 CORS 오류 ( “http://cdn.example.com” has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. ) 가 발생하는 경우 아래와 같이 설정을 했더니 해결되었다.

S3 Bucket CORS 설정 추가

CORS 설정 값

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

그다음으로 CloudFront의 Behaviors 설정에서 Cache Based on Selected Request Headers 를 Whitelist로 수정하고,
Whitelist Headers에 Origin을 추가합니다.

S3, CloundFront 모두 설정을 끝마치고 기존에 cache된 데이터를 Invalidating 합니다.

Object Paths는 전체 (*)를 하셔도 무방하고, 원하는 디렉토리 및 파일을 지정해서 하시면 됩니다.
이렇게 Invalidating 을 마치면 설정한 CORS 설정이 해당 요청시 적용되는것을 확인하실 수 있습니다.

감사합니다. 😀