AWS S3에서 CORS 에러 발생할 때 (from origin ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource..)

1. 에러 내용

Access to Font at 'http://[오리진1의파일URL]' from origin '[오리진2]' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '[오리진2]' is therefore not allowed access.

웹폰트 파일을 다른 오리진에서 불러올 때 S3 버킷 응답에 Access-Control-Allow-Origin 헤더가 없으면 브라우저가 위와 같은 CORS 오류를 발생시킨다. 여기서 [오리진1의파일URL]은 폰트 파일이 있는 S3 또는 CDN URL이고, [오리진2]는 해당 폰트를 요청하는 웹사이트의 오리진이다.

예를 들어 서비스 페이지가 https://www.example.com이고 폰트 파일이 S3의 다른 도메인에서 제공된다면, S3 CORS 설정에서 https://www.example.com의 GET 요청을 허용해야 한다.

2. 기본 설정

<!-- Sample policy -->
<CORSConfiguration>
        <CORSRule>
                <AllowedOrigin>*</AllowedOrigin>
                <AllowedMethod>GET</AllowedMethod>
                <MaxAgeSeconds>3000</MaxAgeSeconds>
                <AllowedHeader>Authorization</AllowedHeader>
        </CORSRule>
</CORSConfiguration>

샘플 설정처럼 AllowedOrigin을 *로 두면 모든 오리진을 허용한다. 공개 리소스라면 동작 확인에는 편하지만, 실제 운영 환경에서는 필요한 오리진만 지정하는 편이 안전하다.

또한 폰트 파일을 가져오는 요청은 일반적으로 GET이면 충분하다. 다만 브라우저나 구성에 따라 요청 헤더가 달라질 수 있으므로, 문제가 계속된다면 허용 헤더 설정도 함께 확인해야 한다.

3. 설정 수정

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

해결 방법은 S3 버킷의 CORS 설정에서 폰트를 사용하는 웹사이트의 오리진을 AllowedOrigin에 지정하는 것이다. [오리진2]에는 프로토콜과 도메인을 포함한 오리진을 입력한다. 예를 들어 https://www.example.com처럼 작성하며, 경로는 포함하지 않는다.

설정 변경 후에는 브라우저 캐시나 CDN 캐시 때문에 바로 반영되지 않은 것처럼 보일 수 있다. 개발자 도구의 Network 탭에서 폰트 파일 응답 헤더에 Access-Control-Allow-Origin이 포함되어 있는지 확인하고, 필요하면 캐시를 비우거나 CDN을 사용 중인 경우 캐시 무효화도 함께 진행한다.

4. 확인 방법

브라우저 개발자 도구를 열고 Network 탭에서 폰트 파일 요청을 선택한다.
응답 헤더에 Access-Control-Allow-Origin이 있는지 확인한다.
해당 값이 현재 사이트의 오리진과 일치하거나, 공개 허용이 필요한 경우 *로 내려오는지 확인한다.
여전히 오류가 발생하면 요청한 URL이 실제로 CORS 설정을 적용한 버킷 또는 배포 경로인지 확인한다.

5. 참고 링크

https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/dev/cors.html