Amazon S3 CORS（跨源资源共享）和Firefox跨域字体加载

Question

Firefox没有加载来自不同来源的字体，而不是当前的网页，这是一个长期存在的问题。通常，在CDN上提供字体时会出现问题。

在其他问题中提出了各种解决方案：

CSS @font-face not working with Firefox, but working with Chrome and IE

随着Amazon S3 CORS的推出，是否有使用CORS解决Firefox中字体加载问题的解决方案？

编辑：很高兴看到S3 CORS配置的示例。

edit2：我找到了一个有效的解决方案而没有真正了解它的作用。如果有人能够提供有关配置和亚马逊对配置的解释所发生的背景魔法的更详细的解释，将非常感谢，就像nzifnab为它提供赏金一样。

Answer 1

重新启动我的Spring启动应用程序（服务器）为我解决了这个问题。

我在S3上正确配置了CORS。卷曲使用原始标题给出正确的响应。 Safari正在获取字体。只有铬才不愿意接受CORS。

不确定究竟是什么导致了这种行为。必须与If-modified-since有关

Answer 2

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

Answer 3

我遇到了同样的问题。我没有为我的CDD添加CNAME以避免跨域问题...我只需要执行以下操作：

转到您的Bucket属性 - >权限 - >添加更多权限 - > Grantee：Everyone并检查'list'选项。

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

希望这对某人有用。

Answer 4

这个配置对我有用。我可以列出对象，检索，更新和删除。

<?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 5

在Amazon S3 CORS配置（S3 Bucket / Permissions / 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文件，但它不适用于Font文件。

您必须使用@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 / Invalidations / Create Invalidation），它将起作用。

Answer 6

<ifModule mod_headers.c>

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

</ifModule>

简单解决方案