☰

即使在服务器中设置了 Access-Control-Allow-Origin，Webfont 也无法通过 CloudFront 加载

tag-icon • tag-icon apache-2.2 amazon-cloudfront
即使在服务器中设置了 Access-Control-Allow-Origin，Webfont 也无法通过 CloudFront 加载

我想使用 cloudfront 作为 CDN 来加速网站。我所有的 JS 和 CSS 都运行良好，但我被一些无法从 CDN 加载的 webfont 卡住了。

Access-Control-Allow-Origin我使用以下语法设置了 Apache VHOSTS 文件：

Header always set Access-Control-Allow-Origin "*.example.com"

我是否为 Access-Control-Allow-Origin 输入了正确的域，或者应该http://www.example.com？ 在这种情况下http://cdn.example.com是指向 cloudfront DNS 的 CNAME 点。

当我卷曲时，我得到这样的标题：

HTTP/1.0 200 OK
Content-Length: 41012
Connection: keep-alive
Date: Sun, 09 Jun 2013 20:59:30 GMT
Server: Apache/2.2.22 (Ubuntu)
Last-Modified: Fri, 04 May 2012 12:36:06 GMT
Accept-Ranges: bytes
Access-Control-Allow-Origin: *.example.com
Age: 1805
Via: 1.0 cbe4bca697a4e3585803757de75edba7.cloudfront.net (CloudFront)
X-Cache: Hit from cloudfront
X-Amz-Cf-Id: 2im15Ds6Vk81kxdZKtPh7w0JUjW9qyPMgFbnXzrN_RfxJCkeyOjEbg==

但是当我在 Firebug 中查看同一个文件时，我没有看到 Access-Control-Allow-Origin 标头。

字体在样式表中以这种方式调用

@font-face {
 font-family: 'TitilliumRegular';
 src: url('TitilliumText1.eot');
 src: local('Titillium Regular'), local('Titillium-Bold'), url('TitilliumText1.ttf') format('truetype');
}

然后将此样式表导入到另一个使用@import url("../fonts/titillium/stylesheet.css");

我读过关于 CORS 和 cloudfront 的各种帖子，据我所知，设置是正确的。我遗漏了什么？

答案1

因此，要解决上述问题需要做两件事：

  1. Access-Control-Allow-Origin从域转换为 *
  2. 创建了一个新的 CloudFront 分发，因为几乎不可能使缓存中的字体无效

一旦完成，一切都会顺利进行。

相关内容