首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >来源字体已被跨域资源共享策略阻止加载

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

Stack Overflow用户
提问于 2014-08-30 08:50:44
回答 14查看 271.6K关注 0票数 167

我在几个Chrome浏览器上收到以下错误,但不是全部。在这一点上,我不完全确定问题是什么。

跨域资源共享策略已阻止加载来自源'https://ABCDEFG.cloudfront.net‘的

字体:请求的资源上不存在'Access-Control-Allow- origin’标头。因此不允许访问源'https://sub.domain.com‘。

我在S3上有以下CORS配置

代码语言:javascript
复制
<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedHeader>*</AllowedHeader>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

请求

代码语言:javascript
复制
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文件。

EN

回答 14

Stack Overflow用户

发布于 2015-01-30 21:27:26

将此规则添加到您的.htaccess

代码语言:javascript
复制
Header add Access-Control-Allow-Origin "*" 

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

代码语言:javascript
复制
Header add Access-Control-Allow-Origin "your-domain.com"
票数 94
EN

Stack Overflow用户

发布于 2014-09-06 15:48:55

自2014年9月/10月以来,Chrome对字体的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中有关于这一点的讨论

对于字体,浏览器可能会执行preflight check,然后是您的S3策略needs the cors request header as well。你可以在Safari (目前不做CORS字体检查)和Firefox (检查字体)中检查你的页面,然后再检查一遍,这就是所描述的问题。

有关亚马逊S3 CORS的详细信息,请参阅Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading上的堆栈溢出答案。

注意,因为这通常只适用于Firefox,所以搜索Firefox而不是Chrome可能会有所帮助。

票数 60
EN

Stack Overflow用户

发布于 2016-12-30 06:14:01

我只需在S3存储桶的CORS策略中添加<AllowedMethod>HEAD</AllowedMethod>,就可以解决这个问题。

示例:

代码语言:javascript
复制
<?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>
票数 48
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25577981

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档