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中文網其他相關文章！