Chrome reports a cross-origin font issue despite Access-Control-Allow-Origin header

Question

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 ^(.*)$ https://example.com/$1 [L,R=301,NC]
Redirect 301 / https://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 ^(.*)$ https://example.com/$1 [L,R=301,NC]
Redirect 301 / https://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?

Answer 1

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=$0 
    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: https://www.example.com/" --head https://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.