fbpx

Access to font at xxx from origin yyy has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource

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

Share this article

Share on facebook
Share on twitter
Share on linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to Top