AWS S3 跨域请求在 ie9 上失败

Posted

技术标签:

【中文标题】AWS S3 跨域请求在 ie9 上失败【英文标题】:AWS S3 cross-origin request failed on ie9 【发布时间】:2013-05-07 07:35:39 【问题描述】:

我正在尝试制作一种网络字体并将其部署在 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>

【问题讨论】:

您能发布您当前的 CORS 配置吗? @LarryMcKenzie 现在在原帖中发布了 CORS 你能解释一下你的网络服务器配置吗?如果有帮助,我也发现了这个:css-tricks.com/forums/discussion/21452/… 字体托管在 S3 存储桶上,因此我无法设置任何 .htaccess 文件,据我所知,我无法进行其他配置(CORS 除外) . ***.com/questions/12229844/… 【参考方案1】:

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

1) 登录 AWS 管理控制台并通过 https://console.aws.amazon.com/s3/ 打开 Amazon S3 控制台

2)在Buckets列表中,打开要查看属性的bucket,点击“添加CORS配置”

3) 在标签&lt;CORSConfiguration&gt;之间写下你愿意添加的规则

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

您可以在以下位置了解更多关于规则的信息:http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

【讨论】:

是的,我可以通过删除我的 &lt;AllowedHeader&gt; 行来解决。谢谢!【参考方案2】:

IE9 支持.WOFF; IE8 不支持,仅支持 .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 类型(文本/纯文本)提供,尽管这不会导致您的问题。

如果您想在您的计算机上保留 IE8 并针对 IE9 进行测试,请从 here 下载独立的 Platform Preview 8

IE9 blocks download of cross-origin web font

【讨论】:

***.com/questions/5065362/… 不回答我的问题【参考方案3】:

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

    在您的存储桶上启用 CORS,如下所述:http://docs.aws.amazon.com/AmazonS3/latest/UG/EditingBucketPermissions.html

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

【讨论】:

【参考方案4】:

让 CORS 设置对我有用的是单击 CORS 设置页面上的删除按钮,然后添加新的 CORS 配置

在我点击 DELETE 之前,编辑现有设置似乎没有任何效果。

【讨论】:

以上是关于AWS S3 跨域请求在 ie9 上失败的主要内容,如果未能解决你的问题,请参考以下文章

解决jquery ajax在跨域访问post请求的时候,ie9以下无效(包括ie9)的问题

Angular 跨域请求在 Chrome 上有效,在 Firefox 和 IE 上失败

IE9版本号下面ajax 跨域问题解决

AngularJS 中的跨域 HTTP 请求失败

layui跨域问题

为啥有些跨域 JSON 请求会失败,而有些则不会?