如何使用 Amazon S3 CORS 修復 Firefox 的跨域字體載入問題？

Amazon S3 CORS 和Firefox 跨域字體載入：解決字體載入問題

已知Firefox 在從與目前網頁不同的來源載入字體時會遇到問題，特別是當字體託管在CDN 上時。這個問題已在線上論壇（包括引用的論壇）中廣泛討論。

為了應對這項挑戰，Amazon S3 CORS（跨源資源共享）提供了一種潛在的解決方案。 CORS 允許伺服器指定可從其他網域存取的資源，從而減輕跨網域安全限制。

要為 S3 設定 CORS，必須將 XML 文件上傳到包含字型的儲存桶。建議使用以下設定：

<?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>

此設定允許：

• 來自指定來源(mydomain.com) 的GET 要求
• 指定來源的子網域
• 將CORS 標頭的最大年齡設定為3000秒
• 允許以「Content-」和「Host」開頭的請求標頭

但是，由於Cloudfront 對Access-Control-Allow-Origin 標頭的緩存，一些開發人員報告了跨域字體載入的問題。為了解決這個問題，一種解決方法是使用查詢字串來區分來自不同域的呼叫：

curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

此方法允許 Cloudfront 為不同域提供唯一的回應，繞過快取問題。

總之，使用 Amazon S3 CORS 以及查詢字串解決方法可以解決 Firefox 的跨域字體載入問題。如果需要進一步協助，請參閱引用的 AWS 論壇主題，以了解 Amazon 專家的更多見解和解釋。

以上是如何使用 Amazon S3 CORS 修復 Firefox 的跨域字體載入問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！