☰

글꼴 파일 관련 AWS Cloudfront CORS 문제

tag-icon • tag-icon amazon-s3 amazon-cloudfront cors css
글꼴 파일 관련 AWS Cloudfront CORS 문제

CloudFront 엔드포인트에서 브라우저로 전달되는 Javascript 애플리케이션이 있습니다. 애플리케이션의 모든 정적 파일은 S3 버킷에서 호스팅됩니다. 여기에는 전체 자바스크립트 및 CSS 파일과 일부 글꼴 파일이 포함됩니다.

전체 애플리케이션을 로드하는 html은 서버에 의해 생성 및 전달됩니다. 해당 서버를 "https://my.domain.com"이라고 부르겠습니다.

언급했듯이 이것은 단지 html 파일입니다.모두그런 다음 버킷을 원본으로 가리키는 Cloudfront 엔드포인트에서 정적 콘텐츠가 다운로드됩니다. 이를 xxxx.cloudfront.net이라고 부르고 버킷을 my-bucket이라고 부르겠습니다.

내가 이해하는 한, 생성된 html에서 cloudfront 엔드포인트에 대한 거의 모든 요청은 CORS 요청입니다. html의 출처는 my.domain.com이고 요청된 모든 파일은 분명히 해당 도메인에서 호스팅되지 않기 때문입니다.

그래서 자연스럽게 모든 CORS 관련 설정을 진행하게 되었습니다. 우선 버킷은 완전히 공개되어 있으며 다음과 같은 CORS 정책을 갖습니다.

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

그리고 그것은 모든 것에 효과가 있는 것 같습니다...제외하고글꼴 파일! 버킷의 폴더 구조에 대해 언급해야 할 것 같습니다. Production, Development, Common이라는 세 개의 폴더가 있습니다. 이들 내용은 설명이 필요하지 않습니다. Common에는 글꼴과 일부 타사 자바스크립트 라이브러리가 포함되어 있습니다. 프로덕션 및 개발에는 해당 환경에 대한 js 및 css가 포함되어 있습니다.

어쨌든,모든 것다음과 같은 오류가 발생하는 글꼴 파일을 제외하고 로드됩니다.

Access to font at 'https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2' from origin 'https://my.domain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

나는 그것이 매우 이상하다고 생각했습니다.오직글꼴 파일에 이 문제가 있을 수 있습니다. 공통 폴더의 다른 파일은 잘 로드되는 것 같은데, 그냥 붙여넣기만 하면https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2내 브라우저에공장.

유일한 차이점은 이러한 파일이 html에서 로드되지 않고 @font-face를 통해 CSS에서 로드된다는 것입니다. 애플리케이션을 로드할 때 브라우저에서 생성된 요청을 보면 예를 들어 js 또는 css 파일을 요청하기 위한 것이 아닌 원본 헤더가 설정되어 있음을 분명히 알 수 있습니다. Set-Fetch-Mode는 "cors"로 설정되고 다른 파일의 경우 "no-cors"로 설정됩니다.

어쨌든 클라우드프론트 측에서 문제를 해결하려고 노력했습니다. 먼저 오리진 구성에 "Access-Control-Allow-Origin: *" 헤더를 추가했습니다. 그런 다음 경로 패턴 *에 대해 GET, HEAD, OPTIONS를 허용하도록 원본에 대한 동작 구성을 추가했습니다.

그리고 지금... 음, 지금도 같은 문제가 있고 아이디어가 전혀 없습니다. @font-face에 의해 생성된 요청이 javascript 및 CSS 리소스에 대한 요청과 비교할 때 왜 그렇게 다르게 구성되는지 궁금합니다. 무엇보다도, 빌어먹을 글꼴을 로드하려면 도대체 무엇을 할 수 있습니까?

답변1

좋아, 이건 짜증났지만 논리적인 것 같아.

위에 게시한 수정사항일해, 그러나 구성 변경으로 인해 CloudFront 캐시가 무효화되지는 않습니다. 그리고 CORS 오류는브라우저, cloudfront는 해당 응답, 헤더 및 모든 것을 캐시했습니다. 왜냐하면 응답에 문제가 있는 것을 볼 수 없었기 때문입니다.

간단히 말해서: 구성 변경 후 클라우드 프론트 캐시가 무효화되어 이제 작동합니다. 아아!

관련 정보