wordpress - "Access to Font..has been blocked by CORS policy"只有一个文件

Question

Note: I am using Wordpress and serving the media files, css, js, etc. through Amazon CloudFront/S3.

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

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>

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

谢谢，
布赖恩

Answer 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>

为我工作!