Amazon S3 CORS 能否解决 Firefox 的跨域字体加载问题？

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