Amazon S3 CORS는 Firefox의 Cross-Origin 글꼴 로딩 문제를 해결할 수 있습니까?

Amazon S3 CORS를 사용하여 Firefox에서 원본 간 글꼴 로드 문제 해결

Firefox는 다른 원본에서 글꼴을 로드하는 데 오랫동안 문제가 있었습니다. 웹페이지. 이 문제는 글꼴이 CDN에서 호스팅될 때 자주 발생합니다. 다양한 솔루션이 제안되었지만 Amazon S3 CORS(Cross-Origin Resource Sharing)를 활용하여 이 문제를 해결할 수 있습니까?

글꼴 로딩을 위한 CORS 구성

활성화하려면 CORS를 통해 글꼴을 로드하려면 다음 CORS 정책으로 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>

이 구성에서는 GET이 허용됩니다. 특정 헤더가 있는 지정된 도메인의 요청을 사용하여 원본 간 글꼴 로드를 활성화합니다.

쿼리 문자열 해결 방법

Cloudfront가 Access-Control-Allow-Origin 헤더를 캐싱하는 경우 , 서로 다른 도메인의 통화를 구별하려면 쿼리 문자열을 사용하는 것이 좋습니다.

예: 도메인의 경우 A:

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

도메인 B의 경우:

https://hashhashhash.cloudfront.net/font.woff?http_b.domain.com

이 해결 방법을 사용하면 Cloudfront가 각 도메인에 대해 올바른 CORS 헤더를 제공할 수 있습니다.

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