IE9重定向缓存，字体和跨域资源共享（CORS）CDN HTTP标头

我以为我有某种方式found a solution to the very vexing problem with Firefox and CDN-hosted fonts access，但这里来了IE9。IE9重定向缓存，字体和跨域资源共享（CORS）CDN HTTP标头

我最近发现IE9缓存问题的一个非常令人沮丧的问题，并偶然发现blog post (IE9 Redirect Caching Nightmare)这启发了我更多关于实际问题。

我不得不承认，我不确定上述提到的是否真的是问题，但它似乎足够接近。

问题：

我有一个网站设置了2个结构域（基本域和子域）指向相同的服务器，服务托管其使用相同的一组资源的从CDN完全相同的网站在Amazon S3上，由Cloudfront提供服务。

CSS3117: @font-face failed cross-origin request. Resource access is restricted.

这发生在我装或者URL的第一：

https://example.com 
https://www.example.com

我使用@字体面从我的CSS文件中加载字体时，得到这些类型的错误消息在我的IE9开发者工具控制台，然后访问另一个。 IE9是而不是在Compatibility Mode中运行。它运行在Document Mode: IE9 Standards。

从我对CORS的有限理解和需要设置Access-Control-Allow-Origin HTTP标头，我已经尽职尽责地将其设置在S3 CORS策略中，并且它与Firefox完美兼容。

来自这两个域的请求将在请求CDN资源时得到它们各自的头。

看来，IE9试图做一些优化与缓存，并缓存重定向太。这也会导致问题，因为Access-Control-Allow-Origin标头也被缓存。在不向CDN服务器发送请求的情况下，Access-Control-Allow-Origin标头不能针对不同的域进行更改。

所以我留下了一个情况，请求是从https://www.example.com，但Access-Control-Allow-Origin是https://example.com。这会导致上面的错误消息有限的资源问题。

看得更远：我做了检查与Firefox 19，上述情况实际发生，但它不会遇到同样的严格限制，如IE9。请求信息的子域（https://www.example.com）将接受主域（https://example.com）的access-control-allow-origin。 Chrome（Webkit）似乎并不在乎。我不知道哪个浏览器的行为实现是正确的。

使用我在CDN中的当前设置，Chrome和Firefox似乎会自动将所有www子域请求重新路由到主域。只有在地址栏中输入www子域名的多次尝试后，Chrome和Firefox才会遵守。 IE9另一方面，只是去地址栏中输入的任何地址。 IE9似乎是这里的奇怪之处，但我不确定哪个浏览器的行为实际上是正确的。

从可用性的角度来看，Chrome和Firefox似乎是“正确的”行为。

已知可能的解决方案：

设置Access-Control-Allow-Origin头，让所有，即*
重定向一个域关闭缓存在浏览器中的其他
使用查询字符串区分不同的域名资源要求
将字体嵌入到CSS中作为data-uri

对于解决方案1，让我们只是说我是偏执狂，我只是想设置特定的域允许。

对于解决方案2，是不是最佳的，如果我要设置它所有浏览器，也是我的网站有与通常低于理想的下载速度在移动设备上运行。

对于解决方案3，可能，但我仍然好奇直接处理IE9缓存问题的解决方案。

对于解决方案4，实施起来非常困难，特别是在从@font-face调用资源时。这是否意味着我将不得不动态地重新生成用于不同线路的不同域调用的CSS，以便加载字体以绕过该问题？似乎击败了CSS本身的目的，并为此缓存资源。

编辑：样式表工作，字体加载不。

对于解决方案5，维护和更新过程繁琐，尤其是在周期性更改字体文件时。

问题：在这种特殊情况下，是否有任何已知的方式来处理IE9的重定向缓存行为？

回答和意见非常感谢。提前致谢！

编辑：更多浏览器测试信息。

来源

2013-03-04 VKen

解决方案1： 检查this question。

解决方案4：将您的CSS文件重命名为style.php并使用您需要的任何代码来调用相应的资源。

设置页面顶部的内容类型。

<?php 
    header("Content-type: text/css; charset: UTF-8"); 
?>

More info关于Chris Coyier的style.php。

来源

2013-03-12 22:26:14

感谢您的回答，与其他问题的链接让我更仔细地研究了这个问题。解决方案1已经在CDN上实施。问题在于IE9，因为它是奇怪的。我在我的问题中添加了更多信息。解决方案4，我不使用PHP，但我理解要实现的原则。此外，我需要浏览器缓存资源，以便在网站上快速加载页面，尤其是移动客户端。你知道动态生成的样式表是否被缓存？它是否绕过标题绕过标题问题？ – VKen 2013-03-13 02:02:50

你使用IIS吗？ – 2013-03-13 02:48:56

不，如问题所述，我使用亚马逊网络服务。 – VKen 2013-03-13 04:36:37

我们在IE10和IE11中也发现了同样的怪异行为。

重置浏览器缓存使字体被加载没有任何问题。还启用和禁用兼容模式。

但是，当切换到另一个子域时，IE不显示字体，因为请求标头与仍然是最后一个请求的URL的响应标头不匹配。即使存储桶的定义是* .ourdomain.com

即使存储桶的定义也是如此，但允许将交叉原始请求交给资产（如webfonts）的一般问题是通过向S3存储桶添加CORS权限解决的 - 即使Firefox中的网页字体完美运行。

但我们仍然不知道如何避免*并告诉IE不缓存响应头。

来源

2014-01-15 13:59:11 Stefan

IE9重定向缓存，字体和跨域资源共享（CORS）CDN HTTP标头

回答

相关问题