AWS CloudFront 의 CORS 오류 수정

AWS CloudFront 의 CORS 오류 수정

publish date
Jun 30, 2020
Tags
aws
워드프레스의 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 설정 추가
notion image
 
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을 추가합니다.
 
notion image
notion image
 
S3, CloundFront 모두 설정을 끝마치고 기존에 cache된 데이터를 Invalidating 합니다.
 
notion image
 
Object Paths는 전체 (*)를 하셔도 무방하고, 원하는 디렉토리 및 파일을 지정해서 하시면 됩니다.
이렇게 Invalidating 을 마치면 설정한 CORS 설정이 해당 요청시 적용되는것을 확인하실 수 있습니다.
 
notion image
 
감사합니다. 😀
 
notion://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F81ddab70-c650-4643-9506-6c96e2f8b0a9%2Fphoto-1611890798517-07b0fcb4a811.jpeg?table=block&id=ef6f5840-d6a5-4efe-a2b9-b264578dc950&spaceId=7fa25789-ee4e-4888-b368-61eca6ae5e2f&width=2000&userId=2bf7df48-6918-471c-9d60-00b571daa739&cache=v2