跨域资源共享策略字体答案

【问题标题】：Cross-Origin Resource Sharing policy Font跨域资源共享策略字体
【发布时间】：2017-01-07 21:26:28
【问题描述】：

我正在将 W3 Total Cache 与 Amazon Cloudfront 结合使用。我的 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

但还是报错：

来自“https://example.cloudfront.net”的字体已被跨域资源共享策略阻止加载：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'https://www.example.com' 因此不允许访问。

为什么会这样？

【问题讨论】：

标签： amazon-cloudfront

【解决方案1】：

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

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

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

然后使缓存的字体失效。

【讨论】：

只是想强调一下，使缓存字体无效是我解决此问题的关键步骤。

【解决方案2】：

为此苦苦挣扎了好几天，我想我终于解决了。以下是一些需要检查的事项：

webserver 配置应添加正确的标头。问题中列出了 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> 到： <AllowedHeader>*</AllowedHeader> 您应该开始在响应中看到必要的 Access-Control-Allow-Origin 标头。

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

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/

【讨论】：

我认为在您的 S3 设置中只有 <AllowedOrigin>*</AllowedOrigin> 很重要。
<AllowedOrigin>*</AllowedOrigin> 足以从 S3 后端返回 Access-Control-Allow-Origin: * HTTP 标头。

【解决方案3】：

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

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

【讨论】：

你能解释一下吗？我有同样的问题。我确实在 S3 存储桶上设置了 CORS，以允许任何来源、任何标题，但字体仍然无法在 Chrome 上加载。我要在网络服务器设置中更改什么？

【解决方案4】：

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

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

【讨论】：