我在几个Chrome浏览器上收到以下错误,但不是全部 . 目前还不确定问题是什么 .
来自“https://ABCDEFG.cloudfront.net”的字体已被跨源资源共享策略阻止加载:请求的资源上没有“Access-Control-Allow-Origin”标头 . 因此,不允许来源“https://sub.domain.com”访问 .
我在S3上有以下CORS配置
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedHeader>*</AllowedHeader>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
请求
Remote Address:1.2.3.4:443
Request URL:https://abcdefg.cloudfront.net/folder/path/icons-f10eba064933db447695cf85b06f7df3.woff
Request Method:GET
Status Code:200 OK
Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:abcdefg.cloudfront.net
Origin:https://sub.domain.com
Pragma:no-cache
Referer:https://abcdefg.cloudfront.net/folder/path/icons-e283e9c896b17f5fb5717f7c9f6b05eb.css
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36
来自Cloudfront / S3的所有其他请求都能正常工作,包括JS文件 .
10 回答
有一个很好的写作here .
Configuring this in nginx/apache is a mistake.
如果您使用的是托管公司,则无法配置边缘 .
如果您使用的是Docker,应用程序应该是自包含的 .
请注意,某些示例使用
connectHandlers
,但这仅在doc上设置标头 . 使用rawConnectHandlers
适用于所有服务的资产(fonts / css / etc) .这将是一个看待框架等的好时机 .
heroku的工作解决方案在这里http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html(引用跟随):
以下是您在Heroku中运行Rails应用程序并使用Cloudfront作为CDN时可以执行的操作 . 它在Ruby 2.1 Rails 4,Heroku Cedar堆栈上进行了测试 .
将CORS HTTP标头(Access-Control- *)添加到字体资源
将gem
font_assets
添加到Gemfile .bundle install
将
config.font_assets.origin = '*'
添加到config/application.rb
. 如果您想要更精细的控制,可以将不同的原始值添加到不同的环境中,例如config/config/environments/production.rb
curl -I http://localhost:3000/assets/your-custom-font.ttf
将代码推送到Heroku .
配置Cloudfront以转发CORS HTTP标头
在Cloudfront中,选择您的发行版,在"behavior"选项卡下,选择并编辑控制字体交付的条目(对于大多数简单的Rails应用程序,此处只有1个条目) . 将前向 Headers 从"None"更改为"Whilelist" . 并将以下 Headers 添加到白名单:
保存它,就是这样!
警告:我发现即使CORS错误消失,Firefox也不会刷新字体 . 在这种情况下,请继续刷新页面几次,以使Firefox确信您确实已经确定 .
将此规则添加到.htaccess
甚至更好,正如@david thomas所建议的那样,你可以使用特定的域值,例如:
Nginx的:
AWS S3:
选择你的水桶
单击右上角的属性
Permisions =>编辑Cors配置=>保存
保存
http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/
唯一对我有用的东西(可能是因为我与www . 用法不一致):
将其粘贴到.htaccess文件中:
http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts
我只需将
<AllowedMethod>HEAD</AllowedMethod>
添加到S3 Bucket的CORS策略即可解决问题 .例:
2014年6月26日,AWS在CloudFront上发布了适当的Vary:Origin行为,现在您就可以了
为S3存储桶设置CORS配置:
在CloudFront - > Distribution - >此行为的行为中,使用Forward Headers:Whiteelist选项并将'Origin' Headers 列入白名单 .
等待~20分钟,而CloudFront传播新规则
现在,您的CloudFront分配应该为不同的客户端Origin头缓存不同的响应(使用适当的CORS头) .
我有同样的问题,这个链接为我提供了解决方案:
http://www.holovaty.com/writing/cors-ie-cloudfront/
它的简短版本是:
编辑S3 CORS配置(我的代码示例未正确显示)
注意:这已在原始问题中完成
注意:提供的代码不是很安全,链接页面中的更多信息 .
转到您的发行版的"Behaviors"标签,然后单击进行编辑
将“无(改进缓存)”中的"Forward Headers"更改为“白名单” .
将“Origin”添加到"Whitelist Headers"列表中
保存更改
您的Cloudfront分发版将更新,大约需要10分钟 . 之后,一切都很好,您可以通过检查与浏览器相关的CORS相关错误消息来验证 .
自2014年9月/ 10月以来,Chrome使字体与Firefox完成https://code.google.com/p/chromium/issues/detail?id=286681相同的CORS检查 . https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw对此进行了讨论
鉴于对于字体,浏览器可以执行preflight check,然后是您的S3策略needs the cors request header as well . 您可以在Safari(目前不对字体进行CORS检查)和Firefox(确实如此)中检查您的页面,以便仔细检查这是描述的问题 .
有关Amazon S3 CORS详细信息,请参阅Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading上的堆栈溢出应答 .
NB一般因为这只适用于Firefox,所以它可能有助于搜索Firefox而不是Chrome .
对于那些使用带有web.config文件的Microsoft产品的人:
将其与您的web.config合并 .
如果您没有编辑web.config的权限,请在服务器端代码中添加此行 .