About CORS
Cross-origin resource sharing is a way to share libraries and fonts across multiple servers. However, in order to avoid security issues, many servers block other servers from sharing resource to another domain by default.
This article explains how to set up to set up CORS on Apache for domains and sub domains
In our example:
Domain 1. This is where the resources are located.
Domain 2. A subdomain, but could also be a main domain.
Domain 3. A subdomain, but could also be a main domain
E.g:
- An application is located on livehelp.domain.com
- The main website, which uses this application, is https://domain.com
- Another part of the website, e.g. shop.domain.com, also uses the application on livehelp.domain.com
An error such as below will display on Domains 2 and 3:
Access to font at 'https://livehelp.domain.com/etc/Lato-Regular.woff' from origin 'https://domain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
Solution
The .htaccess file on Domain 1 must be modified.
Add this to the .htaccess:
AddType application/vnd.ms-fontobject .eot AddType application/x-font-ttf .ttf AddType application/x-font-opentype .otf AddType application/font-woff .woff <FilesMatch ".(eot|ttf|otf|woff)"> Header set Access-Control-Allow-Origin "*" </FilesMatch>
Reference:
https://www.virtualmin.com/node/54489