Faq Why i receive a CORS origin error when using the CDN feature?
Why i receive a CORS origin error when using the CDN feature?

It could happen that while setting up HTTPS on a Joomla website that is using an external CDN, certain assets can't be loaded because of a browser error related to cross-domain resources that are blocked by the browser policy.

This is visible in the browser console (F12) as an error reported in the format:
'Error: Font from origin https://www.yourdomain.com has been blocked from loading by Cross-Origin Resource Sharing Policy: No Access-Control-Allow-Origin header is present on the requested resource. Origin https://www.yourdomain.com is therefor not allowed to access'

Let’s understand what is Cross-origin resource sharing (CORS). CORS is industry standard for accessing web resources on different domains. It is very important security concept implemented by web browsers to prevent Javascript or CSS code from making requests against a different origin.

Let’s consider this scenario:

  • You have link from Domain1 which is opened in browser and asking for a JavaScript file from Domain2.
  • Now your web browser makes call to Domain2.
  • If on Domain2, you have a policy to accept request like JavaScript or CSS from only Domain2 and ignore all requests from other domains, then your browser’s Domain1 request will fail with an error.

In simple statement: If request is not coming from same domain or origin, just simply ignore it. This is very important features which prevents hacking and resource stealing without owners’s knowledge.

The first thing to do is to check if you have setup an origin URL in your CDN control panel and if it's the correct one for your website domain or not. If this is the case, you can fix the problem just specifying the correct domain for CORS.

As an alternative, for example if you don't have access to the CDN control panel, you can easily solve this problem thanks to the website htaccess by adding the following directive:

<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>

The Access-Control-Allow-Origin "*" allows you to access all resources and webfonts from all domains.