Solution to “Font from origin ‘http://cdn.domain.com’ has been blocked from loading by Cross-Origin Resource Sharing policy”

ads space

I recently discovered icon fonts on the website of my ProfilePress WordPress plugin weren’t displaying. On viewing my browser console, i saw the following error notice logged.

Font from origin ‘http://d2hkd6cwxvu8h1.cloudfront.net’ 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://profilepress.net’ is therefore not allowed access.

Apparently, the browser was blocking connection from profilepress.net to its cloudfront CDN because of the restriction of browser’s same origin policy whereby siteA cannot fetch content from siteB unless via Cross-Origin Resource Sharing (CORS) in which response from siteB include a Access-Control-Allow-Origin header granting permission to siteA.

If you encounter a similar error where siteA isn’t able to fetch content from siteB, you can solve it by ensuring response from siteB contains the following HTTP header explicitly granting permission to siteA.

<br/>Access-Control-Allow-Origin: siteA.com

Access-Control-Allow-Origin: siteA.com

This can be achieved by adding the following to your website application .htaccess file if your web server is powered by Apache.

<br/>Header set Access-Control-Allow-Origin "siteA.com"

Header set Access-Control-Allow-Origin "siteA.com"

For Nginx, see below.

<br/>location ~* \.(eot|ttf|woff)$ { add_header Access-Control-Allow-Origin 'siteA.com';<br/>}

location ~* \.(eot|ttf|woff)$ {    add_header Access-Control-Allow-Origin 'siteA.com';

Note: the code snippet above set the Access-Control-Allow-Origin header only when fonts are requested thus the eot, ttf, woff extensions. To add support for more file types e.g. CSS stylesheet, insert the extension css within the braces delimited by a pipe.

If like me, siteA is a CDN (Amazon Cloudfront) you needed to fetch a resource from; to solve this problem, follow the steps below.

• Login to your cloudfront dashboard and navigate to your website distribution.
• Click the Origin menu tab.
• I am pretty sure you have an origin created otherwise create one pointing to your website or s3 bucket where the resource(s) your website will fetch is stored.
• Add an Origin Custom Headers as depicted in the image below.
  
• Save and you are done.

With any of the above ritual done, your website should now be able to fetch the blocked resources.

La Fin.

ads space

 Computer amp; Internet, cors, Font, icon font, same origin policy, Web Development