[S3 & CloudFront] CORS 이슈

View 작업 중 CDN으로 사용하고 있던 CloudFront에서 에러가 났다.

 

이유는 Access-Control-Allow-Origin Header 세팅이 되지 않아 다른 도메인(Cross Origin)에 존재하는 웹폰트 파일을 불러 오지 못했기 때문이다.

 

 

S3 와 CloudFront의 CROS 세팅으로 해결 하였다. 순서는 아래와 같다.

 

1. 버킷 CROS 편집

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

2.  버킷 정책 편집

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "Grant a CloudFront Origin Identity access to support private content",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity {CloudFront Origin Access Identity}"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{버킷 도메인}/*"
        }
    ]
}

 

- CloudFront Origin Access Identity와 버킷 도메인은 필수로 입력해야된다.

 

3. CloudFront Behavior 설정

 

 

- Use legacy cache settings 체크

 

- Cashe based on Seleted Request Headers를 Whitelist로 변경

 

- Whitelist Headers 추가 (3)

* Access-Control-Request-Headers

* Access-Control-Request-Method

* Access-Control-Request-Origin

 

변경후에 CloudFront Invalidations을 꼭 해줘야 된다

 

자세한 내용은 아래 링크에 잘 설명되어 있다. 

 

aws.amazon.com/ko/premiumsupport/knowledge-center/no-access-control-allow-origin-error/

CloudFront의 "No 'Access-Control-Allow-Origin' header" 오류 해결