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