跨域资源共享策略字体

Question

我正在使用Amazon cloudfront的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 

但是仍然会出现错误：

Font已被跨域资源共享策略阻止加载原点'https://example.cloudfront.net‘：请求的资源上不存在'Access-Control-Allow- origin’标头。因此不允许访问源'https://www.example.com‘。

为什么会发生这种情况？

Answer 1

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

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

将“Forward Headers”从“None”更改为““Whitelist”

• Add”，将“Origin”更改为“Whitelist Headers”

• 确保选中“Use Origin

• Headers”

然后使缓存的字体无效。

Answer 2

几天来我一直在纠结这个问题，我想我终于解决了它。以下是一些需要检查的内容：

• the服务器配置应添加正确的报头。问题中列出了Apache语法。下面是我使用的Nginx语法：

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

• 在W3TC >性能> CDN >自定义文件列表中，我添加了以下内容来上传实际的字体文件：

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

在

• 中，设置主题文件类型以将上传到以下位置。根据@Yao的链接，默认分隔符不一致(应该都是分号，而不是逗号)

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

• 在S3 >权限> CORS配置中，更改默认的

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

• 在CloudFront >分发>行为中，进行以下更改：

1. Change **Allowed HTTP Methods** to `GET, HEAD, OPTIONS` (you need `OPTIONS`)
2. Change **Forward Headers** to **Whitelist**
3. Under **Whitelist Headers**, **Add** >> **Origin**

​

要测试的

• ：

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

不过，这可以在the服务器设置中更改。