@font-face속성에서 url()로 폰트 리소스 호출 시 만난 CORS에러

문제상황

기존 소스파일에 포함되어있었던 폰트, 이미지, 아이콘 파일 등등을 CDN으로 받아오려고 작업하다가 만난 에러이다.

AWS S3에 올리고 CloudnFront로 받아오도록 작업했는데, 다른 파일들은 괜찮은데 폰트를 받아오는 경우에만 CORS error 가 발생했다.

 

 

검색해보니 CSS 내에서 @font-face 속성으로 Cross-Origin의 폰트 리소스를 호출하는 경우에 해당되기 때문에 발생하는 에러였다.

사파리에서는 이상없이 잘 되는데 크롬에서 CORS에러가 발생함... 브라우저마다 CORS 정책이 달라서 그런것 같다.

 

 

아래의 W3C 권장사항을 참고해보면 나는 세번째 경우에 해당하므로 Access-Control-Allow-Origin 리스폰스 헤더 값을 와일드카드(*)로 지정해주어야한다.

 

 

해결 방법

1. AWS 콘솔에서 해당 S3 버켓의 권한 메뉴로 들어간다.

 

2. CORS에 대한 정책을 아래와 같이 지정해준다. 해당 버킷은 정적 에셋을 담아놓고 있다가 요청에 대해 내려주기만하는 용도이기 때문에 GET, HEAD method에만 와일드카드(*)로 열어두었다.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

 

적용 후 잘 받아와지는 것을 확인할 수 있었다! 👏👏👏

 

 

참고 링크

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements

https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html#cors-allowed-headers