Firefox에서 도메인 간 글꼴 로딩을 위해 Amazon S3 CORS를 구성하는 방법은 무엇입니까?

Amazon S3 CORS 및 Firefox의 도메인 간 글꼴 로드

Firefox는 특히 글꼴이 CDN에 있는 경우 현재 웹페이지가 아닌 원본에서 글꼴을 로드하는 데 복잡성이 발생합니다. 이 문제를 해결하기 위해 Amazon S3 CORS(Cross-Origin Resource Sharing) 구현을 비롯한 다양한 솔루션이 제안되었습니다.

S3 CORS 구성

다음을 통해 도메인 간 글꼴 로딩을 활성화합니다. S3 CORS의 경우 Amazon S3를 다음과 같이 구성해야 합니다.

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://mydomain.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://*.mydomain.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

이것은 구성:

• 지정된 원본(mydomain.com 및 해당 하위 도메인)의 요청을 허용합니다.
• 글꼴을 가져오는 데 사용되는 GET 메서드로 요청을 제한합니다.
• 캐싱 시간을 3000초로 지정하여 로드를 줄입니다.
• 글꼴 검색에 필요한 특정 헤더를 허용합니다(콘텐츠 유형 및 호스트).

Cloudfront 캐싱 문제

일부 사용자는 Cloudfront 캐싱 문제가 발생할 수 있습니다. Access-Control-Allow-Origin 헤더, 도메인 간 글꼴 로딩을 방지합니다. 이를 방지하려면 쿼리 문자열을 사용하여 서로 다른 도메인의 요청을 구별하세요. 예:

<pre class="brush:php;toolbar:false">curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

이 예에서 쿼리 문자열 "?https_a.domain.com"은 도메인 "a.domain.com"의 요청을 고유하게 식별합니다. 그런 다음 Cloudfront는 각 도메인에 대해 사용자 정의된 Access-Control-Allow-Origin 헤더를 반환합니다.

위 내용은 Firefox에서 도메인 간 글꼴 로딩을 위해 Amazon S3 CORS를 구성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!