IE9重定向缓存、字体和跨域资源共享(CORS)CDN HTTP头

3
我以为我已经找到了解决Firefox和CDN托管字体访问问题的方法,但是IE9又出现了问题。
最近我发现一个非常令人沮丧的IE9缓存问题,并偶然发现了这篇博客文章(IE9重定向缓存噩梦),更加明确了实际问题。
我必须承认我不确定上述是否真的是问题,但它似乎足够接近。
问题:我有一个网站设置,2个域名(基本域名和子域名)指向同一台服务器,提供完全相同的网站,该网站使用来自Amazon S3上CDN托管的相同资源集,并由Cloudfront提供服务。
https://example.com
https://www.example.com

当使用@font-face从CSS文件加载字体时,我在IE9开发者工具控制台中收到这种类型的错误消息:

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

当我先加载其中一个URL,然后再访问另一个URL时,就会出现这种情况。IE9没有运行在“兼容模式”下,而是运行在“文档模式: IE9标准”下。
从我有限的对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似乎是“正确”的行为。
已知可能的解决方案:
  1. Access-Control-Allow-Origin头设置为允许所有,即*
  2. 关闭浏览器缓存
  3. 将一个域名重定向到另一个域名
  4. 使用查询字符串区分不同域名对资源的调用
  5. 将字体作为data-uri嵌入到CSS中

对于解决方案1,我只想设置特定的域名允许。

对于解决方案2,如果我要为所有浏览器设置它,这并不是最优的选择,而且我的网站必须在移动设备上运行,通常下载速度不太理想。

对于解决方案3,虽然可行,但我仍然好奇如何直接处理IE9缓存问题的解决方案。

对于解决方案4,实现非常困难,特别是当资源从@font-face中调用时。这是否意味着我必须为不同的行为不同域名调用动态重新生成CSS,以加载字体来绕过该问题?似乎违背了CSS本身和缓存资源的目的。

编辑:样式表起作用,但字体加载不起作用。

对于解决方案5,特别是当字体文件定期更改时,维护和更新都很繁琐。
问题:是否已知有特定方法来处理IE9在这种情况下的重定向缓存行为?
非常感谢您的回答和评论。提前致谢!
编辑:更多浏览器测试信息。
2个回答

0

我们发现IE10和IE11也存在相同的奇怪行为。

重置浏览器缓存可以使字体正常加载。同时启用和禁用兼容模式也可以。

但是当切换到另一个子域时,IE不会呈现字体,因为请求头与响应头不匹配,而响应头仍然是上一个请求的URL。即使桶上的定义是*.ourdomain.com,IE始终显示完整的URL。

因此,允许跨源请求像Web字体这样的资源的一般问题是通过向S3 Bucket添加CORS权限来解决的-这使得Web字体在Firefox中完美地工作。

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


0

解决方案1: 请查看此问题

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

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

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

了解更多信息关于Chris Coyier的style.php。


感谢您的回答,提供的链接让我更仔细地研究了这个问题。解决方案1已经在CDN上实现了。问题似乎出现在IE9上,因为它是一个例外。我已经在我的问题中添加了更多信息。解决方案4,我不使用PHP,但我理解实现原理。此外,我需要浏览器缓存资源,以便快速加载网站,特别是移动客户端。您知道动态生成的样式表是否会被缓存吗?它是否可以绕过头部问题? - VKen
不,如问题所述,我使用亚马逊网络服务。 - VKen

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接