1

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?

  • 1
    That Redirect directive looks out of place... that will either result in a redirect loop, but's missing a trailing slash on the target URL (which will result in a malformed request?!), or the user/request is redirected to a "different server" so the remaining directives are not being executed?! – MrWhite May 30 '17 at 16:38
  • Hi, thank you for your help. I put a forward slash at the end of the domains in the <FilesMatch> ...example.com,...www.example.com ...</FilesMatch> element. But to no avial. Because I have both www.example.com and example.com as domains, Google treats them as two separate sites. So I added an .htaccess file to the doc root (/var/www/example.com/public_html) re-directs requests for www to the example.com. Site is hosted on a CentOS 7 server with Apache. Interesting: I don't get error if I go to example.com. Just www.example.com. Should I bump to redirect issue here? – Adam R. May 30 '17 at 16:58
  • 1
    Presumably you are linking to https://www.example.com/... throughout your application? Why do you have 2 <FilesMatch> wrappers? The second Header set will simply overwrite the first. (However, I'm still stuck on that earlier Redirect directive - I can't see how this is working at all?) – MrWhite May 30 '17 at 17:20
  • That's a really good question. I think because I wanted to cover both the www.example.com and the example.com just in case. The issue article I got the code example from didn't quite have the exact issue as I am having so I wanted to cover both domains which are the same site(application) if that's what you meant by "application". Also, the .htaccess file (which is supposed to point www.example.com requests to redirect to the example.com domain and it is not working at all. I have yet to resolve that issue. – Adam R. Jun 1 '17 at 3:17
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.

  • Thank you all for the wonderful responses. I no longer have the error. Issue was in Chrome but/Apache/2.4.6 (CentOS) OpenSSL/1.0.1e-fips PHP/5.4.16 issue. Fix: (from advice above and hosting company) I took out the original code in .htaccess and called my hosting company. They suggested that I use the below code for my file which solved the error: RewriteEngine On RewriteBase / RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC] RewriteRule ^(.*)$ https://%1/$1 [R=301,L] – Adam R. Jun 3 '17 at 14:12
  • 1
    That code looks like it just redirects other domains and subdomains to your main domain. You may have had an issue with calling fonts using absolute links on a domain that might not match the current one. – Stephen Ostermiller Jul 29 '17 at 9:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.