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