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