AWS S3跨域请求在ie9上失败

Question

我正在尝试创建一个网络字体并在AWS S3上部署。

在除IE9之外的所有浏览器中都正常工作，而在IE9中，当尝试加载woff文件时，它会显示跨域请求失败。

我已经在许多论坛上阅读了很多关于人们遇到此问题的帖子，但我无法找到解决方法。

我认为这与S3上的CORS设置有关，它在IE9上未能发送正确的数据或其他内容？

（在Firefox，Chrome，IE7,8等浏览器中正常工作）

我看到的唯一解决此问题的建议是：启动EC2实例并为字体制作Web主机（完全过度！），另一个建议是将CSS文件命名为.php并在php中设置标头（但这很愚蠢）。

是否有人知道如何（如果可能）解决此问题？

谢谢

编辑

我的CORS配置：

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

- TheStoneFox

---

你能发布一下你当前的CORS配置吗？ - Larry McKenzie

@LarryMcKenzie 在原帖中发布了CORS。 - TheStoneFox

你能简单解释一下你的Web服务器配置吗？我还发现了这个链接，如果有帮助的话：http://css-tricks.com/forums/discussion/21452/font-family-not-working-in-ie9-but-all-other-ies/p1 - Larry McKenzie

字体托管在S3存储桶上，因此我无法设置任何.htaccess文件，并且据我所知，除了CORS之外，我无法进行任何其他配置。 - TheStoneFox

https://dev59.com/t2ct5IYBdhLWcg3wQ7My - user1987371

我也遇到了同样的问题。你找到解决方案了吗？ - Romanych

Answer 1

我已经完成了。基本上，您可以按照以下步骤编辑S3存储桶的权限。如果需要进一步帮助，请在下面留言。

1）登录AWS Management Console并在https://console.aws.amazon.com/s3/打开Amazon S3控制台。

2）在Bucket列表中，打开要查看属性的Bucket，并单击“add CORS configuration”。

3）在标记之间编写要添加的规则。

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
  </CORSRule>
</CORSConfiguration>

您可以在以下链接中了解有关规则的更多信息：http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html。

- Flavio Wuensche

---

是的，我通过从我的代码中删除<AllowedHeader>行来解决了这个问题。谢谢！ - Chris Peters

Answer 2

IE9支持.WOFF字体格式；IE8不支持.WOFF，只支持.EOT字体格式。

打开IE9 F12开发者工具，您会看到以下信息：

CSS3117：@font-face跨域请求失败。资源访问受限。 Neuton-webfont.woff

CSS3117：@font-face跨域请求失败。资源访问受限。 YanoneKaffeesatz-Regular-webfont.woff

CSS3114：@font-face OpenType嵌入权限检查失败。权限必须是可安装的。 Neuton-webfont.ttf

CSS3114：@font-face OpenType嵌入权限检查失败。权限必须是可安装的。 YanoneKaffeesatz-Regular-webfont.ttf 通过检查HTTP头，很明显您的跨域访问未正确配置，因为您的WOFF文件上没有Access-Control-Allow-Origin响应头。它们还使用了错误的MIME类型（text/plain），尽管这并不是导致问题的原因。

如果您想在计算机上保留IE8并针对IE9进行测试，请从此处下载独立的平台预览版8。

IE9阻止跨域网页字体的下载

- user1987371

---

https://dev59.com/52445IYBdhLWcg3wDV8P - user1987371

不回答我的问题。 - TheStoneFox

Answer 3

您可以通过为存储字体的S3存储桶设置CORS配置来轻松解决此问题。

1. 按照此处所述启用存储桶上的CORS：http://docs.aws.amazon.com/AmazonS3/latest/UG/EditingBucketPermissions.html

2. 按照此处指定的方式设置适当的配置：http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

- douglasr

Answer 4

让CORS设置对我起作用的是在CORS设置页面上点击“删除”按钮，然后添加新的CORS配置。

编辑现有设置似乎没有任何效果，直到我点击了“删除”按钮。

- chim