如何在 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中文网其他相关文章！