: Chrome reports a cross-origin font issue despite Access-Control-Allow-Origin header Chrome: "Font from origin 'https://example.com' has been blocked from loading by Cross-Origin Resource Sharing
Chrome:
"Font from origin 'https://example.com' has been blocked from loading
by Cross-Origin Resource Sharing policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'https://www.example.com' is therefore not allowed
access."
My .htaccess file looks like this:
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.example.com [NC]
RewriteRule ^(.*)$ example.com/ [L,R=301,NC]
Redirect 301 / example.com
Then I added this to the bottom of the file:
Header add Access-Control-Allow-Origin "*"
...and cleared cache same issue.
...then per this article: Font blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin'
I added these lines and replaced my domain with example.com:
<FilesMatch ".(ttf|otf|eot|woff|woff2)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "https://example.com"
</IfModule>
</FilesMatch>
<FilesMatch ".(ttf|otf|eot|woff|woff2)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "https://www.example.com"
</IfModule>
</FilesMatch>
My entire .htaccess looks like this:
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.example.com [NC]
RewriteRule ^(.*)$ example.com/ [L,R=301,NC]
Redirect 301 / example.com Header add Access-Control-Allow-Origin "*"
<FilesMatch ".(ttf|otf|eot|woff|woff2)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "https://example.com"
</IfModule>
</FilesMatch>
<FilesMatch ".(ttf|otf|eot|woff|woff2)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "https://www.example.com"
</IfModule>
</FilesMatch>
Any help here?
More posts by @Berumen354
1 Comments
Sorted by latest first Latest Oldest Best
Setting two Access-Control-Allow-Origin headers doesn't work. If you want to allow two different subdomains (bare domain, and "www") this StackOverflow answer suggests you do this:
<FilesMatch ".(ttf|otf|eot|woff|woff2)$">
SetEnvIf Origin "^http(s)?://(.+.)?example.com$" origin_is=[CO]
Header always set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>
You then need to actually test to see if it is working. You can use curl on the command line:
$ curl --header "Origin: www.example.com/ --head example.com/my-font.woff
As the comments state, your .htaccess file looks like it cannot possibly work. The Redirect 301 rule in there is unconditional, so it should be redirecting every request. My guess is that is not being applied at all. Maybe you are editing the wrong file. Perhaps you have have the file name wrong. Perhaps you are in the wrong directory. It is also possible that Apache is configured not to use .htaccess. Apache allows the file to have a different name if there is config like AccessFileName ".config". They are also disabled by default. The config needs an AllowOverride directive set to something like All for for your directory.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.