一尘不染

Amazon S3 CORS(跨域资源共享)和Firefox跨域字体加载

css

Firefox存在一个长期存在的问题,即不加载与当前网页不同来源的字体。通常,在CDN上提供字体时会出现问题。

随着Amazon S3 CORS的推出,是否存在使用CORS解决Firefox中字体加载问题的解决方案?

编辑:非常高兴看到S3 CORS配置的示例。

edit2:我找到了一个可行的解决方案,但实际上并没有理解它的作用。如果任何人都可以提供有关配置的更详细的解释以及亚马逊解释配置时发生的背景魔术,那将不胜感激,就像nzifnab为其提供赏金一样。


阅读 422

收藏
2020-05-16

共1个答案

一尘不染

好的,我终于通过下面的配置使字体工作了,对文档中的示例进行了一些调整。

我的字体托管在S3上,但在Cloudfront前面。

我不确定为什么会起作用,我的猜测可能是<AllowedMethod> GET<AllowedHeader> Content-*所需要的。

如果精通Amazon S3 CORS配置的任何人都可以对此有所了解,将不胜感激。

<?xml version="1.0" encoding="UTF-8"?>
<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>

编辑:

一些开发人员面临Cloudfront缓存Access-Control-Allow-Origin标头的问题。AWS工作人员已在下面的链接中解决了此问题,

作为解决方法,建议从链接线程使用 查询字符串 来区分来自不同域的调用。我将在这里重现简短的示例。

使用curl检查响应头:

域A:a.domain.com

curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

来自域A的响应头:

Access-Control-Allow-Origin: https://a.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront

域B:b.domain.com

curl -i -H "Origin: http://b.domain.com" http://hashhashhash.cloudfront.net/font.woff?http_b.domain.com

来自域B的响应头:

Access-Control-Allow-Origin: http://b.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront

您会注意到,Access-Control-Allow-Origin返回了不同的值,这些值已经超过了Cloudfront缓存。

2020-05-16