亚马逊S3 CORS（跨来源资源共享）和Firefox跨域字体装载(Amazon S3 CORS (

2019-06-17 23:54发布

站内文章 / 前端开发

20 0

傲

女 | 书童

私信

目前已经与Firefox不从不同来源比当前网页字体加载一个长期存在的问题。通常情况下，当字体上的CDN服务出现的问题。

各种解决方案已经提出的其他问题：

CSS @字体面不与Firefox的工作，但随着Chrome和IE工作

通过引入亚马逊S3 CORS的，有没有使用CORS来解决Firefox中的字体加载问题的解决方案？

编辑：这将是巨大看到S3 CORS配置的样本。

EDIT2：我发现实际上不理解什么是做了工作的解决方案。如果有人可以提供有关CONFIGS和对配置的亚马逊的解释发生的背景魔术更详细的解释，这将不胜感激，与nzifnab谁把一个赏金它。

Answer 1:

更新2014年9月10日：

你不应该需要做下面的任何查询字符串黑客的了，因为正确的Cloudfront支持CORS现在。见http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/和这个答案详细信息： https://stackoverflow.com/a/25305915/308315

OK，我终于用下面从文档中示例的小调整的配置工作的字体。

我的字体托管在S3，而是通过CloudFront的门前。

我不知道为什么它的作品，我的猜测是可能的是， <AllowedMethod> GET和<AllowedHeader> Content-*是必要的。

如果有人精通亚马逊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工作人员安排（ https://forums.aws.amazon.com/thread.jspa?threadID=114646 ）以下时，通过@杰夫·阿特伍德评论。

从联线，建议，作为一种解决方法，使用查询字符串 ，从不同的域调用之间的区别。我会在这里重现缩短的例子。

使用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缓存。

Answer 2:

一些调整之后，我似乎已经得到了这个没有查询字符串破解工作。更多资讯： http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorS3Origin.html#RequestS3-cors

我要通过我的整个安装，这样很容易看到我做了什么，希望这可以帮助别人。

背景资料：我使用的是具有asset_sync宝石把资产S3上一个Rails应用程序。这包括字体。

在S3控制台，我点击了我的水桶，性能和“编辑CORS配置”，在这里：

textarea的里面我有这样的：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://*.example.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

然后内的Cloudfront面板（ https://console.aws.amazon.com/cloudfront/home ）我创建的分布，补充，指向我的S3桶的原点

然后添加了一个默认的路径指向基于S3原点我设置一个行为。我也做了点击白名单头和补充Origin ：

现在会发生什么是下面的，我相信这是正确的：

1）检查S3标头被设定正确

curl -i -H "Origin: https://example.com" https://s3.amazonaws.com/xxxxxxxxx/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
x-amz-id-2: Ay63Qb5uR98ag47SRJ91+YALtc4onRu1JUJgMTU98Es/pzQ3ckmuWhzzbTgDTCt+
x-amz-request-id: F1FFE275C0FBE500
Date: Thu, 14 Aug 2014 09:39:40 GMT
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Content-Type: application/x-font-ttf
Content-Length: 12156
Server: AmazonS3

2）检查的Cloudfront的工作原理与头

curl -i -H "Origin: https://example.com" https://xxxxx.cloudfront.net/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
Content-Type: application/x-font-ttf
Content-Length: 12156
Connection: keep-alive
Date: Thu, 14 Aug 2014 09:35:26 GMT
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin
X-Cache: Miss from cloudfront
Via: 1.1 77bdacfea247b6cbe84dffa61da5a554.cloudfront.net (CloudFront)
X-Amz-Cf-Id: cmCxaUcFf3bT48zpPw0Q-vDDza0nZoWm9-_3qY5pJBhj64iTpkgMlg==

（注意：上述是从CloudFront的一个小姐，因为这些文件缓存180秒，但同样正在研究命中）

在- 3）不同来源（而且是一个允许在CORS的S3桶）CloudFront的命中Access-Control-Allow-Origin是不缓存！好极了！

curl -i -H "Origin: https://www2.example.com" https://xxxxx.cloudfront.net/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
Content-Type: application/x-font-ttf
Content-Length: 12156
Connection: keep-alive
Date: Thu, 14 Aug 2014 10:02:33 GMT
Access-Control-Allow-Origin: https://www2.example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin
X-Cache: Miss from cloudfront
Via: 1.1 ba7014bad8e9bf2ed075d09443dcc4f1.cloudfront.net (CloudFront)
X-Amz-Cf-Id: vy-UccJ094cjdbdT0tcKuil22XYwWdIECdBZ_5hqoTjr0tNH80NQPg==

注意：上面说的域名已经没有查询字符串黑客成功地改变了。

当我改变了Origin标，似乎永远是一个X-Cache: Miss from cloudfront第一个请求，然后后来我得到预期的X-Cache: Hit from cloudfront

PS值得注意的是，这样做卷曲-I（大写I）时将不会显示访问控制允许来源标题，因为它只有一个头，我做-i使它成为一个GET和向上滚动。

Answer 3:

我的字体被送达正确直到最后推Heroku的...我不知道为什么，但在CORS通配符允许起源停止工作。我说我所有的原初和亲域的CORS政策在桶设定所以现在看起来是这样的：

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>http://prepro.examle.com</AllowedOrigin>
        <AllowedOrigin>https://prepro.examle.com</AllowedOrigin>
        <AllowedOrigin>http://examle.com</AllowedOrigin>
        <AllowedOrigin>https://examle.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>

</CORSConfiguration>

更新：添加您http://localhost:PORT太

Answer 4:

那么，文档指出，你可以坚持的配置为“你的水桶的CORS子资源。” 我把这个意思我想创建一个在我的桶的配置的根被称为“CORS”的文件，但是这是行不通的。最后，我不得不登录到Amazon S3的行政区域和内添加配置properties我斗的对话框。

S3可以使用一些更好的文档...

Answer 5:

就我而言，我还没有定义的CORS配置XML命名空间和版本。定义这些工作。

变

<CORSConfiguration>

至

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">

Answer 6:

有一个更好，更简单的方式！

我个人比较喜欢用我的DNS子域来解决这个问题。如果我的CDN的背后是cdn.myawesomeapp.com而不是sdf73n7ssa.cloudfront.net然后浏览器不会freakout并阻止他们为跨域安全问题。

要指向你的子域名您的AWS的Cloudfront域去AWS的Cloudfront控制面板中，选择您的Cloudfront分布并输入您的CDN子域到备用域名（CNAME记录）字段。像cdn.myawesomeapp.com的东西就行了。

现在你可以去你的DNS提供商（如AWS路线53）和cdn.myawesomeapp.com指向sdf73n7ssa.cloudfront.net创建CNAME。

http://blog.cloud66.com/cross-origin-resource-sharing-cors-blocked-for-cloudfront-in-rails/

Answer 7:

此配置为我工作。我可以列出对象，检索，更新和删除。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>http://localhost:3000</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
    <ExposeHeader>x-amz-meta-custom-header</ExposeHeader>
  </CORSRule>
</CORSConfiguration>

Answer 8:

在亚马逊S3 CORS配置 （S3桶/许可/ CORS）如果你使用这样的：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

CORS行之有效的JavaScript和CSS文件，但它不会对字体文件。

您必须指定域中使用在@VKen答案表达模式CORS允许： https://stackoverflow.com/a/25305915/618464

所以，使用此 ：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>https://*.mydomain.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

记得替换“mydomain.com”为您的域名。

在此之后， 无效CloudFront的缓存 （CloudFront的/失效通知/创建失效），它会工作。

Answer 9:

<ifModule mod_headers.c>

   Header set Access-Control-Allow-Origin: http://domainurl.com

</ifModule>

简单的解决方案

Answer 10:

重新启动我的春天启动的应用程序（服务器）解决了这个问题对我来说。

我曾在S3配置正确CORS。卷曲是给原产头正确的响应。 Safari浏览器被正确读取的字体。这只是谁是不是愿意接受CORS的镶边。

不知道究竟是什么导致了行为。一定有什么做的If-Modified-自

Answer 11:

当然是。 Firefox支持CORS字体，就像规范要求在http://dev.w3.org/csswg/css3-fonts/#allowing-cross-origin-font-loading

Answer 12:

我经历了同样的问题。我没有一个CNAME添加到我的CDD避免跨域问题...我只是不得不做以下几点：

转到您的桶属性 - >权限 - >添加更多的权限 - >承授人：每个人，并检查“列表”选项。

这是一个图形的例子。 http://i.stack.imgur.com/KOEwy.png

希望充分这将是有用的人。

文章来源: Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading

标签： css firefox amazon-s3 font-face cors

傲

女 | 书童

私信

收藏的人(0)

Ta的文章更多文章

0条评论

还没有人评论过~