「訪問Font..has已被CORS策略阻止」僅在一個文件上

Question

注意：我正在使用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. 

其他字體文件都很好我說這個我CORS在AWS S3政策後：

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

出於安全考慮，您必須包含您的網址。

所以，你的.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> 

對我的作品！

Answer 2

您確定要發送Authorization標題和GET請求字體嗎？

如果沒有，你的S3 CORS政策變化

<AllowedHeader>Authorization</AllowedHeader>

到

<AllowedHeader>*</AllowedHeader>。

這個小小的念頭讓我煩擾了一個月。