How can I fix the Missing Cross-Origin Resource Sharing CORS Response Header webfont issue

Question

For some reason fonts have stopped rendering on my sites  The fonts are stored locally  on the same server as the site   I looked up the problem and it seems to be a Missing Cross-Origin Resource Sharing  CORS  Response Header but I cannot understand the solution for this   All the various sites say to do is to use  Access-Control-Allow-Origin    But as I m primarily front end I do not know where to put it  Is this something my host can help with   What can I do to fix the issue   EDIT   the site in question is  http   cyclistinsuranceaustralia com au   The phone number  for example  at the top right should be Bebas font but it is defaulting to Impact   In the console  I get the errors      Font from origin  http   www cyclistinsuranceaustralia com au  has been blocked from loading by Cross-Origin Resource Sharing policy  The  Access-Control-Allow-Origin  header has a value  http   www cyclistinsuranceaustralia com au  that is not equal to the supplied origin  Origin  http   cyclistinsuranceaustralia com au  is therefore not allowed access    I contact my host who said to put   Access-Control-Allow-Origin  http   www cyclistinsuranceaustralia com au    in my  htaccess file but this has no change

User · Answer

We had this exact problem with fontawesome-webfont.woff2 throwing a 406 error on a shared host (Cpanel). I was working on the elusive "cookie-less domain" for a Wordpress Multisite project and my "www.domain.tld" pages would have the following error (3 times) in Chrome:

Font from origin 'http://static.domain.tld' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.domain.tld' is therefore not allowed access.

and in Firefox, a little more detail:

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: http://static.domain.tld/wp-content/themes/some-theme-here/fonts/fontawesome-webfont.woff2?v=4.7.0
font-awesome.min.css:4:14 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://static.domain.tld/wp-content/themes/some-theme-here/fonts/fontawesome-webfont.woff?v=4.7.0. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

I got to QWANT-ing around (QWANT.com = fantastic) and found this SO post:

Access-Control-Allow-Origin wildcard subdomains, ports and protocols

An hour in chat with different Shared Host support staff (one didn't even know about F12 in a browser...) then waiting for a response to the ticket that got cut after no joy while playing with mod_security. I tried to cobble the code for the .htaccess file together from the post in the meantime, and got this to work to remedy the 406 errors, flawlessly:

    <IfModule mod_headers.c>
    <IfModule mod_rewrite.c>
        SetEnvIf Origin "http(s)?://(.+\.)?domain\.tld(:\d{1,5})?$" CORS=$0
        Header set Access-Control-Allow-Origin "%{CORS}e" env=CORS
        Header merge  Vary "Origin"
    </IfModule>
    </IfModule>

I added that to the top of my .htaccess at the site root and now I have a new Uncle named Bob. (***of course change the domain.tld parts to whatever your domain that you are working with is...)

My FAVORITE part of this post though is the ability to RegEx OR (|) multiple sites into this CORS "hack" by doing:

To allow Multiple sites:

SetEnvIf Origin "http(s)?://(.+\.)?(othersite\.com|mywebsite\.com)(:\d{1,5})?$" CORS=$0

This fix honestly kind of blew my mind because I've ran into this issue before, working with Dev's at Fortune 500 companies that are MILES above my knowledgebase of Apache and couldn't solve problems like this without getting IT to tweak on Apache settings.

This is kind of the magic bullet to fix all those CDN issues with cookie-less (or near cookie-less if you use CloudFlare...) domains to reduce the amount of unnecessary web traffic from cookies that get sent with every image request only to be ditched like a bad blind date by the server.

Super Secure, Super Elegant. Love it: You don't have to open up your servers bandwidth to resource thieves / hot-link-er types.

Props to a collective effort from these 3 brilliant minds for solving what was once thought to unsolvable with .htaccess, whom I pieced this code together from:

@Noyo https://stackoverflow.com/users/357774/noyo

@DaveRandom https://stackoverflow.com/users/889949/daverandom

@pratap-koritala https://stackoverflow.com/users/4401569/pratap-koritala

User · Answer

we had similar header issue with Amazon  AWS  S3 presigned Post failing on some browsers   point was to tell bucket CORS to expose header  lt ExposeHeader gt Access-Control-Allow-Origin lt  ExposeHeader gt    more details in this answer  https   stackoverflow com a 37465080 473040

User · Answer

If you are just interested in the use of  Access-Control-Allow-Origin    You can do that with this  htaccess file at the site root   Header set Access-Control-Allow-Origin       Some useful information here  http   enable-cors org server apache html

User · Answer

In your HTML you have set a  base  tag    lt base href  http   www cyclistinsuranceaustralia com au   gt     Delete that line from your HTML if you don t need it  This should make the fonts work when viewed from http   cyclistinsuranceaustralia com au  You ll probably need to redirect http   www cyclistinsuranceaustralia com au to http   cyclistinsuranceaustralia com au

User · Answer

I m going to assume your host is using C-Panel - and that it s probably HostGator or GoDaddy   In both cases they use C-Panel  in fact  a lot of hosts do  to make the Server administration as easy as possible on you  the end user   Even if you are hosting through someone else - see if you can log in to some kind of admin panel and find an  htaccess file that you can edit    Note  The period before just means that it s a  hidden  file directory    Once you find the htaccess file add the following line    Header set Access-Control-Allow-Origin     Just to see if it works  Warning  Do not use this line on a production server   It should work   If not  call your host and ask them why the line isn t working - they ll probably be able to help you quickly from there    Once you do have the above working change the   to the address of the requesting domain http   cyclistinsuranceaustralia com au    You may find an issue with canonical addressing  including the www  and if so you may need to configure your host for a redirect   That s a different and smaller bridge to cross though   You ll at least be in the right place

User · Answer

In your particular case the issue seem to be with accessing the site from non-canonical url  www site com vs  site com    Instead of fixing CORS issue  which may require writing proxy to server fonts with proper CORS headers depending on service provider  you can normalize your Urls to always server content on canonical Url and simply redirect if one requests page without  www     Alternatively you can upload fonts to different server CDN that is known to have CORS headers configured or you can easily do so

[.htaccess] How can I fix the 'Missing Cross-Origin Resource Sharing (CORS) Response Header' webfont issue?

Examples related to .htaccess

Examples related to fonts

Examples related to cors

Examples related to font-face

Examples related to webfonts