文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >亚马逊火狐CORS (跨域资源共享)和S3跨域字体加载

问亚马逊火狐CORS (跨域资源共享)和S3跨域字体加载
EN

Stack Overflow用户
提问于 2012-09-02 01:25:25
回答 13查看 94.4K关注 0票数 139

Firefox无法加载与当前网页不同来源的字体，这是一个长期存在的问题。通常，当在CDN上提供字体时，问题就会出现。

在其他问题中提出了各种解决方案：

CSS @font-face not working with Firefox, but working with Chrome and IE

随着Amazon的引入，有没有使用CORS来解决S3中字体加载问题的解决方案？

编辑:如果能看到S3 CORS配置的示例，那就太好了。

edit2:我发现了一个有效的解决方案，但实际上并不了解它做了什么。如果有人能提供关于配置的更详细的解释，以及亚马逊对配置的解释产生的背景魔力，将非常感谢，就像nzifnab一样，他们为此提供了赏金。

amazon-s3
font-face
cors
css
firefox
EN

回答 13

Stack Overflow用户

回答已采纳

发布于 2012-09-08 20:45:58

2014年9月10日更新：

由于Cloudfront现在正确地支持CORS，因此您不再需要执行下面的任何查询字符串处理。有关更多信息，请参阅http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/和此答案：https://stackoverflow.com/a/25305915/308315

好了，我终于使用下面的配置对文档中的示例进行了一些调整，使字体正常工作。

我的字体托管在S3上，但前面是cloudfront。

我不确定它为什么工作，我猜可能是需要<AllowedMethod> GET和<AllowedHeader> Content-*。

如果任何精通亚马逊S3 CORS配置的人都能对此有所了解，我将不胜感激。

代码语言：javascript
运行
复制
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://mydomain.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://*.mydomain.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

编辑：

一些开发人员正面临着缓存Access-Control-Allow-Origin头的问题。亚马逊网络服务的工作人员已经在下面的链接(https://forums.aws.amazon.com/thread.jspa?threadID=114646)中解决了这个问题，@Jeff-Atwood发表了评论。

在链接的线程中，作为一种解决办法，建议使用查询字符串来区分来自不同域的调用。我将在这里重现这个简短的示例。

使用curl检查响应头：

域A: a.domain.com

代码语言：javascript
运行
复制
curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

来自域A的响应标头：

代码语言：javascript
运行
复制
Access-Control-Allow-Origin: https://a.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront

域名B: b.domain.com

代码语言：javascript
运行
复制
curl -i -H "Origin: http://b.domain.com" http://hashhashhash.cloudfront.net/font.woff?http_b.domain.com

来自域B的响应头：

代码语言：javascript
运行
复制
Access-Control-Allow-Origin: http://b.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront

您将注意到Access-Control-Allow-Origin返回了不同的值，这些值通过了Cloudfront缓存。

票数 151
EN

Stack Overflow用户

发布于 2014-08-14 18:32:22

经过一些调整之后，我似乎已经在没有查询字符串hack的情况下工作了。更多信息请点击此处：http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorS3Origin.html#RequestS3-cors

我将通过我的整个设置，以便很容易地看到我做了什么，希望这能帮助其他人。

背景信息:我正在使用一个包含asset_sync gem的Rails应用程序将资源放到S3上。这包括字体。

在S3控制台中，我点击了我的存储桶、属性和“编辑cors配置”，这里：

​

在文本区域中，我有类似这样的东西：

代码语言：javascript
运行
复制
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://*.example.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

然后在云前端面板(https://console.aws.amazon.com/cloudfront/home)中，我创建了一个发布，添加了一个指向我的S3存储桶的原点

​

然后添加了默认路径的行为，以指向基于S3的源I设置。我还点击了白名单标题并添加了Origin：

​

现在发生的事情是这样的，我相信这是正确的：

1)检查S3报头设置是否正确

代码语言：javascript
运行
复制
curl -i -H "Origin: https://example.com" https://s3.amazonaws.com/xxxxxxxxx/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
x-amz-id-2: Ay63Qb5uR98ag47SRJ91+YALtc4onRu1JUJgMTU98Es/pzQ3ckmuWhzzbTgDTCt+
x-amz-request-id: F1FFE275C0FBE500
Date: Thu, 14 Aug 2014 09:39:40 GMT
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Content-Type: application/x-font-ttf
Content-Length: 12156
Server: AmazonS3

2)检查Cloudfront是否与报头一起工作

代码语言：javascript
运行
复制
curl -i -H "Origin: https://example.com" https://xxxxx.cloudfront.net/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
Content-Type: application/x-font-ttf
Content-Length: 12156
Connection: keep-alive
Date: Thu, 14 Aug 2014 09:35:26 GMT
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin
X-Cache: Miss from cloudfront
Via: 1.1 77bdacfea247b6cbe84dffa61da5a554.cloudfront.net (CloudFront)
X-Amz-Cf-Id: cmCxaUcFf3bT48zpPw0Q-vDDza0nZoWm9-_3qY5pJBhj64iTpkgMlg==

(请注意，上面是cloudfront中的一个未命中，因为这些文件被缓存了180秒，但在命中时也是如此)

3)使用不同的源(但在S3存储桶的CORS上允许的源)命中cloudfront - Access-Control-Allow-Origin未被缓存！耶！

代码语言：javascript
运行
复制
curl -i -H "Origin: https://www2.example.com" https://xxxxx.cloudfront.net/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
Content-Type: application/x-font-ttf
Content-Length: 12156
Connection: keep-alive
Date: Thu, 14 Aug 2014 10:02:33 GMT
Access-Control-Allow-Origin: https://www2.example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin
X-Cache: Miss from cloudfront
Via: 1.1 ba7014bad8e9bf2ed075d09443dcc4f1.cloudfront.net (CloudFront)
X-Amz-Cf-Id: vy-UccJ094cjdbdT0tcKuil22XYwWdIECdBZ_5hqoTjr0tNH80NQPg==

请注意，在没有查询字符串黑客攻击的情况下，域已成功更改。

当我更改原始标头时，似乎总是在第一个请求上有一个X-Cache: Miss from cloudfront，然后我得到了预期的X-Cache: Hit from cloudfront

附注:值得注意的是，当执行curl -I (大写I)时，不会显示Access-Control-Allow-Origin头部，因为它只是一个头部，我执行-i使其成为GET并向上滚动。

票数 102
EN

Stack Overflow用户

发布于 2014-09-14 18:43:50

我的字体是正确的，直到最后一次推送到Heroku...我不知道为什么，但CORS允许的源中的通配符停止工作。我将我所有的pro和pro域名添加到存储桶设置中的CORS策略中，所以现在看起来是这样的：

代码语言：javascript
运行
复制
<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>http://prepro.examle.com</AllowedOrigin>
        <AllowedOrigin>https://prepro.examle.com</AllowedOrigin>
        <AllowedOrigin>http://examle.com</AllowedOrigin>
        <AllowedOrigin>https://examle.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>

</CORSConfiguration>

更新:也添加你的http://localhost:PORT

票数 13
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/12229844

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

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