Firefox存在一个长期存在的问题,即不加载与当前网页不同来源的字体。通常,在CDN上提供字体时会出现问题。
随着Amazon S3 CORS的推出,是否存在使用CORS解决Firefox中字体加载问题的解决方案?
编辑:非常高兴看到S3 CORS配置的示例。
edit2:我找到了一个可行的解决方案,但实际上并没有理解它的作用。如果任何人都可以提供有关配置的更详细的解释以及亚马逊解释配置时发生的背景魔术,那将不胜感激,就像nzifnab为其提供赏金一样。
好的,我终于通过下面的配置使字体工作了,对文档中的示例进行了一些调整。
我的字体托管在S3上,但在Cloudfront前面。
我不确定为什么会起作用,我的猜测可能是<AllowedMethod>
GET
和<AllowedHeader>
Content-*
所需要的。
如果精通Amazon S3 CORS配置的任何人都可以对此有所了解,将不胜感激。
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>https://mydomain.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>https://*.mydomain.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>
</CORSRule>
</CORSConfiguration>
编辑:
一些开发人员面临Cloudfront缓存Access-Control-Allow-Origin
标头的问题。AWS工作人员已在下面的链接中解决了此问题,
作为解决方法,建议从链接线程使用 查询字符串 来区分来自不同域的调用。我将在这里重现简短的示例。
使用curl
检查响应头:
域A:a.domain.com
curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com
来自域A的响应头:
Access-Control-Allow-Origin: https://a.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront
域B:b.domain.com
curl -i -H "Origin: http://b.domain.com" http://hashhashhash.cloudfront.net/font.woff?http_b.domain.com
来自域B的响应头:
Access-Control-Allow-Origin: http://b.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront
您会注意到,Access-Control-Allow-Origin
返回了不同的值,这些值已经超过了Cloudfront缓存。
编辑2:我已经找到了一个可行的解决方案,但没有真正理解它的作用。如果有人能提供关于配置的更详细的解释,以及在亚马逊对配置的解释中所发生的背景魔法,那将是非常感谢的,就像nzifnab提供的赏金一样。
问题内容: 我正在编写一个HTML5应用程序,该应用程序使用JSONP从几个不同的来源收集数据。我对GET所做的任何事情都可以正常工作。我现在正尝试发布数据,并且遇到了一个有趣的问题。我需要将数据从我的应用程序发布到另一个应用程序,该应用程序从本地计算机运行。我正在尝试编写具有跨平台功能的移动应用程序(请考虑使用Pulse / Flipboard),因此该代码将始终从本地源运行。我的思考过程如下:
跨域资源共享 (CORS) 跨域资源共享(Cross-Origin Resource Sharing)允许WEB端的应用程序访问不属于本域的资源 配置格式 CORS配置为json字符串,类似 { "rules":[ { "id":"id1" "AllowOrigin":"http://*.example.com" //指定允许发送跨源请求的源,支持使用通配符
问题内容: 我对跨域JavaScript的概念有疑问。 有一个服务器(ex amazon.com),在其中只有选定的域可以使用其Web服务。所以可以肯定,如果我尝试从本地使用他们的服务,我将无法。我在控制台上得到了这个 跨域请求被阻止:“同源起源”策略禁止读取http://football20.myfantasyleague.com/2014/export?TYPE=rosters&L=52761
问题内容: 当人们开始订购过程时,在我的网站https://www.stubwire.com上,我正在从https://files.stubwire.com加载CSS文件。问题是CSS文件正在尝试加载给出错误的字体。有人可以帮我展示如何解决此问题吗?我已经看到有关使用Amazon S3的修复程序,但这是从我们自己的服务器加载的。 错误 跨域资源共享策略已阻止从源“ https://files.st
本文向大家介绍js跨域资源共享 基础篇,包括了js跨域资源共享 基础篇的使用技巧和注意事项,需要的朋友参考一下 本文详细介绍了javascript跨域资源共享,供大家参考,具体内容如下 1.为什么提出跨域资源共享(CORS)? 因为XHR实现ajax的安全限制是:XHR 对象只能访问与包含它的页面位于同一个域中的资源 2.如何实现跨域?(跨浏览器) 以上就是本文的全部内容,希望对大家的学习