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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Amazon S3 CORS(跨源资源共享)和Firefox跨域字体加载相关的知识,希望对你有一定的参考价值。

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

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

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

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

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

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

答案

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

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

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

另一答案

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

另一答案

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

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

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

希望这对某人有用。

另一答案

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

<?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>
另一答案

在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),它将起作用。

另一答案
<ifModule mod_headers.c>

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

</ifModule>

简单解决方案

以上是关于Amazon S3 CORS(跨源资源共享)和Firefox跨域字体加载的主要内容,如果未能解决你的问题,请参考以下文章

AWS S3 CPP

AWS S3 CPP

将 div 中的 amazon s3 图像转换为画布时出现跨源问题

Amazon S3是否需要时间来更新CORS设置?多久?

CloudFront CORS 标头被缓存,导致跨源问题

使用预签名 URL 将文件上传到 Amazon S3 时出现 CORS 错误