如何在 Firefox 中配置 Amazon S3 CORS 以進行跨域字體載入？

Amazon S3 CORS 和Firefox 的跨域字體載入

Firefox 在從目前網頁以外的來源載入字體時會遇到複雜性，特別是當字體駐留在CDN 上時。為了解決這個問題，人們提出了各種解決方案，其中包括實施 Amazon S3 CORS（跨域資源共享）。

S3 CORS 設定

透過以下方式啟用跨域字體載入S3 CORS，您必須如下設定Amazon 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>

這個設定：

• 允許來自指定來源（mydomain.com 及其子網域）的請求。
• 限制對 GET 方法的請求，該方法用於取得字體。
• 指定快取時間為3000秒，減少負載伺服器。
• 允許字體檢索所需的特定標頭（內容類型和主機）。

Cloudfront 快取問題

某些使用者可能會遇到 Cloudfront 快取問題Access-Control-Allow-Origin header，防止跨域字體載入。為了避免這種情況，請使用查詢字串來區分來自不同網域的請求。例如：

<pre class="brush:php;toolbar:false">curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

在此範例中，查詢字串「?https_a.domain.com」唯一標識來自網域「a.domain.com」的請求。然後，Cloudfront 將為每個網域傳回自訂的 Access-Control-Allow-Origin 標頭。

以上是如何在 Firefox 中配置 Amazon S3 CORS 以進行跨域字體載入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！