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

Posted 2023-03-03

技术标签:

【中文标题】“访问字体..已被 CORS 策略阻止”仅在一个文件上【英文标题】："Access to Font..has been blocked by CORS policy" on only one file 【发布时间】：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>

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

谢谢，布赖恩

【问题讨论】：

你解决了吗？ 【参考方案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

上面写着