来自源的字体已被跨源资源共享策略阻止加载

Question

我在几个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文件.

Answer 1

将此规则添加到.htaccess

Header add Access-Control-Allow-Origin "*" 

甚至更好,正如@david thomas所建议的,你可以使用特定的域值,例如

Header add Access-Control-Allow-Origin "your-domain.com"

Answer 2

自2014年9月/ 10月以来,Chrome使字体与Firefox完成的CORS检查相同https://code.google.com/p/chromium/issues/detail?id=286681.https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw对此进行了讨论

鉴于对于字体浏览器可能会进行预检检查,那么您的S3策略也需要cors请求标头.您可以在Safari(目前不对字体进行CORS检查)和Firefox(确实如此)中检查您的页面,以便仔细检查这是描述的问题.

请参阅Amazon S3 CORS(跨源资源共享)上的堆栈溢出应答以及 Amazon S3 CORS详细信息的Firefox跨域字体加载.

NB一般因为这只适用于Firefox,所以它可能有助于搜索Firefox而不是Chrome.

Answer 3

我只需添加<AllowedMethod>HEAD</AllowedMethod>S3 Bucket的CORS策略就能解决问题.

例:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Answer 4

Nginx的:

location ~* \.(eot|ttf|woff)$ {
   add_header Access-Control-Allow-Origin '*';
}

AWS S3:

1. 选择你的水桶
2. 单击右上角的属性
3. Permisions =>编辑Cors配置=>保存
4. 保存

http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/

Answer 5

2014年6月26日,AWS在CloudFront上发布了适当的Vary:Origin行为,现在您就可以了

为S3存储桶设置CORS配置:

<AllowedOrigin>*</AllowedOrigin>

在CloudFront - > Distribution - >此行为的行为中,使用Forward Headers:Whiteelist选项并将'Origin'标题列入白名单.

等待~20分钟,而CloudFront传播新规则

现在,您的CloudFront分配应该为不同的客户端Origin头缓存不同的响应(使用正确的CORS头).

Answer 6

唯一对我有用的东西（可能是因为我与www。用法不一致）：

将此粘贴到您的.htaccess文件中：

<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
<IfModule mod_mime.c>
# Web fonts
AddType application/font-woff woff
AddType application/vnd.ms-fontobject eot

# Browsers usually ignore the font MIME types and sniff the content,
# however, Chrome shows a warning if other MIME types are used for the
# following fonts.
AddType application/x-font-ttf ttc ttf
AddType font/opentype otf

# Make SVGZ fonts work on iPad:
# https://twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml svg svgz
AddEncoding gzip svgz

</IfModule>

# rewrite www.example.com ? example.com

<IfModule mod_rewrite.c>
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>

http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts