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