Font Awesome not working when using HTTP

Question

We have 2 subdomains for a website in order to test our development before moving to production. This is our structure:

• subdomainA.mysite.com
• subdomainB.mysite.com
• mysite.com

When I enter to subdomainB.mysite using http protocol (http://subdomainB.mysite.com) the font awesome icons are not being displayed. Instead of that in the console shows up this:

Font from origin http://subdomainB.othersubdomain.mysite.com has been blocked from loading by Cross-Origin Resource Sharing policy: The 'Access-Control-Allow-Origin' header has a value http://someWebService.ws that is not equal to the supplied origin. Origin http://subdomainB.mysite.com is therefore not allowed access.

With respect to "othersubdomain", that corresponds to another subdomain used for other applications and it shouldn't be interfering with subdomainB.

Now, if I enter the site using https (https://subdomainB.mysite.com) the icon fonts are being displayed and nothing goes on the console, which is good.

On the other hand, when I test in our first subdomain (subdomainA.mysite.com) either I am testing with http or https the iconfonts load fine.

We have the module CDN off in subdomainA and on in subdomainB. At first I thought this was the problem but I turned off the module in subdomainB, cleared registry and test for awhile and the problem remained the same.

Lastly, we have the font awesome library inside the core of our drupal installation so we are not calling this library from a remote location.

Answer 1

Not exactly sure if this is the issue, but when I've had CORS errors with web fonts the following Apache directive in .htaccess has worked for allowing any Origin for those files:

<IfModule mod_headers.c>
  <FilesMatch "\.(eot|otf|tt[cf]|woff)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>