“访问字体..已被 CORS 策略阻止”仅在一个文件上答案

【问题标题】："Access to Font..has been blocked by CORS policy" on only one file“访问字体..已被 CORS 策略阻止”仅在一个文件上
【发布时间】：2017-11-18 08:23:34
【问题描述】：

注意：我正在使用 Wordpress 并通过 Amazon CloudFront/S3 提供媒体文件、css、js 等。

你好，
我知道有很多这样的帖子，但我仍在苦苦挣扎。我能够为我正在加载的大多数字体文件解决此问题，但是，这仍然是一个问题。

Access to Font at 'http://mycloudfrontID.cloudfront.net/wp-content/themes/bridge/css/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3' from origin 'http://mydomainname' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://maxmajor.net' is therefore not allowed access.

在我将它添加到 AWS S3 上的 CORS 策略后，其他字体文件都很好：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

这是在我的 .htaccess 中：

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

任何想法为什么这个错误仍然触发？

谢谢，布赖恩

【问题讨论】：

你解决了吗？

标签： wordpress amazon-web-services amazon-s3 cdn amazon-cloudfront

【解决方案1】：

尝试改变：

Header set Access-Control-Allow-Origin "*"

用这个：

Header add Access-Control-Allow-Origin "*"

我也读过 How does Access-Control-Allow-Origin header work?

Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy

出于安全原因，您必须包含您的 URL。

所以，你的 .htaccess 应该有这个：

<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css)$">
<IfModule mod_headers.c>
    Header add Access-Control-Allow-Origin "http://mysitename.com"
</IfModule>
</FilesMatch>

为我工作！

【讨论】：

非常感谢。我在我的项目中使用了 htaccess 解决方案。谢谢亲爱的，你救了我的命:)

【解决方案2】：

您是否考虑过引用以下帖子？
CORS Issue with woff2 fonts behind CDN in Chrome

上面写着

原来问题实际上出在 Content-Type 上。当我将内容类型更改为 application/font-woff2 并使这些 woff2 文件的缓存无效后，一切顺利。

【讨论】：

【解决方案3】：

您确定要发送Authorization 标头和您的GET 字体请求吗？

如果没有，请在您的 S3 CORS 政策更改中进行

<AllowedHeader>Authorization</AllowedHeader>

到

<AllowedHeader>*</AllowedHeader>.

这个小姑娘已经烦了我一个月了。

【讨论】：