Amazon S3 CORS 能否解決 Firefox 的跨域字體載入問題？

使用Amazon S3 CORS 解決Firefox 中的跨源字體加載問題

Firefox 在加載來自不同來源的字體方面存在長期存在的問題網頁。當字體託管在 CDN 上時，經常會出現此問題。雖然已經提出了各種解決方案，但可以利用 Amazon S3 CORS（跨域資源共享）來解決此問題嗎？

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 標頭，考慮使用查詢字串來區分來自不同網域的呼叫：

例如，對於Domain 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 的跨域字體載入問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！