提问者:小点点

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


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


共3个答案

匿名用户

将此规则添加到。htAccess

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

更好的是,正如@David thomas所建议的,您可以使用特定的域值,例如。

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

匿名用户

从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(做)中检查页面,以进行双重检查,这就是所描述的问题。

有关AmazonS3 CORS的详细信息,请参阅关于AmazonS3 CORS(跨源资源共享)和Firefox跨域字体加载的堆栈溢出答案。

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

匿名用户

我只需将head添加到S3桶的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>