2013-05-13 205 views
5

我正在尝试制作Web字体并将其部署在AWS S3上。AWS S3跨域请求失败ie9

在除IE9之外的所有浏览器中都正常工作,它表示在尝试加载woff文件时,跨源请求失败。

我已经在很多论坛上看过很多有关此问题的论坛,但我一直无法找到解决方法。

我认为这是与S3上的CORS设置有关,不发送正确的数据或东西到IE9?

(在火狐,Chrome,IE7,8等作品)

我已经看到了解决这个问题的唯一建议是,旋转起来的EC2实例,使一个虚拟主机的字体(完全矫枉过正!)另一个是命名为.php的css文件,并在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> 
+0

您可以发布您当前的CORS配置吗? – 2013-05-17 00:47:09

+0

@LarryMcKenzie现在在原文中张贴CORS – TheStoneFox 2013-05-17 05:00:43

+0

您能否解释一下关于您的Web服务器配置。另外我发现这个如果有帮助:http://css-tricks.com/forums/discussion/21452/font-family-not-working-in-ie9-but-all-other-ies/p1 – 2013-05-19 01:23:24

回答

0

IE9支持.WOFF; IE8不支持,只支持.EOT字体。

打开IE9的F12开发工具,你会看到以下消息:

CSS3117:@字体面失败的跨域请求。资源访问受到限制。 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上,从here

IE9 blocks download of cross-origin web font

+0

http://stackoverflow.com/questions/5065362/ie9-blocks-download-of-cross-origin-web-font – 2013-05-22 15:36:31

+1

不回答我的问题 – TheStoneFox 2013-05-23 18:25:26

5

我刚刚做了。基本上,您可以按照步骤编辑您的S3存储桶权限。如果您需要更多帮助,请在下面留言。

1)登录到AWS管理控制台,打开在https://console.aws.amazon.com/s3/

2)在水桶名单亚马逊S3控制台中,打开您要查看,然后单击“添加CORS配置”,其性质

amazon-screen-shot

3)写你愿意标签之间添加的规则<CORSConfiguration>

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

您可以了解在了解规则:http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

+0

是的,我能够通过删除' '来自我的线路。谢谢! – 2014-01-30 11:53:01

0

是取得了CORS设置为我被点击CORS设置页面上的删除按钮,然后添加一个新的CORS配置

编辑现有设置工作的事只是在我击中​​DELETE之前似乎没有任何效果。

enter image description here