Using CORS with a CDN

By Martin Williams
Updated on October 2, 2018
Using CORS with a CDN

CORS stands for Cross-Origin Resource Sharing and is an essential component when files (e.g. fonts or JavaScript) are loaded from another domain (e.g. a CDN) other than the website. In this article we show you how to use CORS with CDN. Especially Firefox (FF) and InternetExplorer (IE) are causing problems when CORS is not handled correctly. FF and IE are considering requests to CDNs as "cross-domain" requests and won't load them unless it is explicitly stated in the HTTP header.

Using CORS with a CDN is fairly simple. You can either tweak the HTTP header on your origin server or you can let us do the work. All it takes is an additional HTTP header called Access-Control-Allow-Origin. Here's an example:

A HTTP header with Access-Control-Allow-Origin

In case you want to handle it on your side, you can simply add the following code to your web server. It will add the HTTP header Access-Control-Allow-Origin for CSS and fonts.

Apache

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

Nginx

location ~ \.(ttf|ttc|otf|eot|woff|font.css|css)$ {
    add_header Access-Control-Allow-Origin "*";
}

We can also handle CORS for you. You simply need to enable the feature. It only takes a few clicks and will be globally available within minutes. We will add the HTTP header if needed.

Make sure you check your website from various browsers. The resources might load perfectly fine in Chrome but the problem will occur in FF and IE.

Happy CORSing everyone!

  • Share

Supercharge your content delivery 🚀

Try KeyCDN with a free 14 day trial, no credit card required.

Get started

Comments

Comment policy: Comments are welcomed and encouraged. However, all comments are manually moderated and those deemed to be spam or solely promotional in nature will be deleted.
  • **bold**
  • `code`
  • ```block```
KeyCDN uses cookies to make its website easier to use. Learn more