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:

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!