Amazon S3 CORS는 Firefox의 Cross-Origin 글꼴 로딩 문제를 해결할 수 있습니까?-CSS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-12-07 04:35:16

원래의

823명이 탐색했습니다.

Can Amazon S3 CORS Solve Firefox's Cross-Origin Font Loading Issues?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!