Question

我在亚马逊云端使用W3 Total Cache。我有我的htaccess文件：

# BEGIN W3TC CDN
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
# END W3TC CDN

但仍然收到错误：

来自原点的字体＆＃39; https://example.cloudfront.net＆＃39;已被跨源资源共享策略阻止加载：No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; https://www.example.com＆＃39;因此不允许访问。

为什么会这样？

Answer 1

在此链接中找到解决方案：https://www.naschenweng.info/2014/09/23/wordpress-w3-total-cache-cloudfront-font-cors-issue/。

您需要更改CloudFront分配的行为设置：

将“转发标题”从“无”更改为“白名单”
将“Origin”添加到“白名单标题”
确保选中“使用原始缓存标头”

然后使缓存的字体无效。

Answer 2

冥冥几天，并认为我终于解决了这个问题。以下是一些要检查的事项：

webserver 配置应添加正确的标头。问题中列出了Apache语法。这是我使用的Nginx语法：

location ~* \.(eot|ttf|woff|woff2)$ { add_header Access-Control-Allow-Origin '*'; }

在 W3TC ＆gt;内表现＆gt; CDN＆gt;自定义文件列表，我添加了以下内容来上传实际的字体文件：

{plugins_dir}/*.ttf {plugins_dir}/*.woff

当您在那里时，请将主题文件类型设置为设置为以下内容。 Per @ Yao的链接，默认的分隔符不一致（应该都是分号，而不是逗号）

*.css;*.js;*.gif;*.png;*.jpg;*.ico;*.ttf;*.otf;*.woff;*.less

在S3＆gt;权限＆gt; CORS配置，更改默认值

<AllowedHeader>Authorization</AllowedHeader> 至： <AllowedHeader>*</AllowedHeader> 您应该开始在响应中看到必要的Access-Control-Allow-Origin标头。

在CloudFront中＆gt;分发＆gt;行为，进行以下更改：
1. 将允许的HTTP方法更改为GET, HEAD, OPTIONS（您需要OPTIONS）
2. 将转发标题更改为白名单
3. 在白名单标题下，添加＆gt;＆gt;的来源

测试：

curl -I -s -X GET -H "Origin: www.example.com" https://abcdefg543210.cloudfront.net/wp-content/path/to/foo.ttf

这应该会返回以下标题：

Access-Control-Allow-Origin: * X-Cache: Miss from cloudfront

我发现这篇博文很有帮助： http://blog.celingest.com/en/2014/10/02/tutorial-using-cors-with-cloudfront-and-s3/

Answer 3

基本上这是因为字体不能设置为在您所在的域之外共享，因此您可以将其用作资源，在本例中为https://example.cloudfront.net

这可以在网络服务器设置中更改。

Answer 4

问题可能并不总是与您的 Web 服务器端的 Nginx 或 Apache 上的原始设置有关。

您还需要在您的 S3 AWS 账户上启用 CORS 才能正常工作。

跨源资源共享策略字体

4 个答案: