Resolve no 'Access-Control-Allow-Origin' error

If you’re developing a web application which involves calling external files like font files, JavaScript and CSS files from sub-domains of your own domain or another domain, for instance, if you’re using a CDN, all your files may not load.

If you’re using Google Chrome and check into Google Chrome Developer Console (Ctrl+Shift+J), you’ll find the following error, “No access control allow origin header is present on the requested resource origin.” Such an error may also come up if you’re using self-CDN in WordPress caching plugins like W3 Total Cache.

Such an error pops up if the resources from that source, from where your resource files are being accessed, do not have an explicit policy that allows those files to be shared on other hosts. In other words, you can’t share these resources from other domain or sub-domain to another domain or main domain without writing a few lines in your .htaccess file which allows files to accessed from other host.

As an example, your fonts from origin http://fonts.example.com are blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Destination http://www.example.com is therefore not allowed access.

So here’s the solution. Add following piece of code in the .htaccess file of your application and viola! Your fonts will start working as normal.

<FilesMatch ".(svg|ttf|otf|eot|woff|woff2)$">
 Header set Access-Control-Allow-Origin "*"

This sets an access control policy for the resources of given file extension, which in this case are font files. If you’ve error in other file types, you can try adding those file formats separated with a pipe symbol like above.