Amazon S3 CORS의 Firefox Cross-Origin 글꼴 로딩 문제를 해결하는 방법은 무엇입니까?

Amazon S3 CORS 및 Firefox 교차 원본 글꼴 로딩 해상도

최근 업데이트와 작동하는 솔루션으로 Firefox가 도메인에서 글꼴을 로드하지 못하는 오랜 문제가 해결되었습니다. 현재 웹페이지가 아닌 다른 페이지. 이 문제는 CDN(콘텐츠 전송 네트워크)을 통해 글꼴을 제공할 때 흔히 발생합니다.

Amazon S3 CORS(Cross-Origin Resource Sharing)를 활용하면 다음 접근 방식으로 이 문제를 해결할 수 있습니다.

샘플 S3 CORS 구성

<?xml version="1.0" encoding="UTF-8"?>
<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>

솔루션 이해

제공된 내용 S3 CORS 구성을 사용하면 지정된 도메인의 글꼴 리소스에 대한 요청을 활성화하여 브라우저에 다른 출처의 글꼴을 로드할 수 있는 권한을 부여할 수 있습니다. 다음과 같이 메소드, 헤더 및 응답 헤더를 허용합니다.

• AllowedMethod: 브라우저에서 글꼴을 가져오기 위해 사용하는 HTTP GET 메소드를 지정합니다.
• MaxAgeSeconds: 응답 캐싱 기간을 3000초로 설정합니다. 캐시된 글꼴을 재사용할 수 있습니다.
• AllowedHeader: 글꼴 로딩에 필요한 Content-* 및 Host 헤더를 요청에 포함할 수 있는 권한을 브라우저에 부여합니다.

Cloudfront 캐싱 문제에 대한 대체 솔루션

Cloudfront 캐싱이 발생하는 경우 해결 방법은 다음과 같습니다. 쿼리 문자열을 활용하여 서로 다른 도메인의 호출을 구별하려면:

http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

이 접근 방식을 사용하면 Cloudfront가 지정된 쿼리 문자열을 기반으로 적절한 Access-Control-Allow-Origin 헤더를 제공할 수 있습니다.

위 내용은 Amazon S3 CORS의 Firefox Cross-Origin 글꼴 로딩 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!