我以为我已经找到了解决Firefox和CDN托管字体访问问题的方法,但是IE9又出现了问题。
最近我发现一个非常令人沮丧的IE9缓存问题,并偶然发现了这篇博客文章(IE9重定向缓存噩梦),更加明确了实际问题。
我必须承认我不确定上述是否真的是问题,但它似乎足够接近。
问题:我有一个网站设置,2个域名(基本域名和子域名)指向同一台服务器,提供完全相同的网站,该网站使用来自Amazon S3上CDN托管的相同资源集,并由Cloudfront提供服务。
当我先加载其中一个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相同的严格限制。子域(
在我的CDN当前设置中,好像Chrome和Firefox会自动将所有
从可用性的角度来看,Chrome和Firefox似乎是“正确”的行为。
已知可能的解决方案:
问题:是否已知有特定方法来处理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似乎是“正确”的行为。
已知可能的解决方案:
- 将
Access-Control-Allow-Origin
头设置为允许所有,即*
- 关闭浏览器缓存
- 将一个域名重定向到另一个域名
- 使用查询字符串区分不同域名对资源的调用
- 将字体作为data-uri嵌入到CSS中
对于解决方案1,我只想设置特定的域名允许。
对于解决方案2,如果我要为所有浏览器设置它,这并不是最优的选择,而且我的网站必须在移动设备上运行,通常下载速度不太理想。
对于解决方案3,虽然可行,但我仍然好奇如何直接处理IE9缓存问题的解决方案。
对于解决方案4,实现非常困难,特别是当资源从@font-face
中调用时。这是否意味着我必须为不同的行为不同域名调用动态重新生成CSS,以加载字体来绕过该问题?似乎违背了CSS本身和缓存资源的目的。
编辑:样式表起作用,但字体加载不起作用。
对于解决方案5,特别是当字体文件定期更改时,维护和更新都很繁琐。问题:是否已知有特定方法来处理IE9在这种情况下的重定向缓存行为?
非常感谢您的回答和评论。提前致谢!
编辑:更多浏览器测试信息。