如何跨源资源共享策略阻止来自原始字体的加载?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (64)

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

提问于
用户回答回答于

Chrome自2014年9月/ 10月以来,使得字体受到与Firefox完成相同的CORS检查。

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

用户回答回答于

将此规则添加到.htaccess中

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

可以使用特定的域值,例如

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

扫码关注云+社区