How to Use CORS

CORS stand for cross-origin resource sharing which allows for resources to be loaded from a domain other than the origin domain. Put into effect to limit security risks while having the ability to use resources from other domains, CORS is very practical with today’s extensive use of HTML5. We’ve covered more in-depth what CORS is here, so in this article we’ll go over how to use CORS by enabling/disabling it directly from the KeyCDN dashboard or by implementing it on your origin server.

CORS works by having the origin domain send HTTP request headers to the host domain that is hosting the resource. The example below shows that https://www.keycdn.com is the Origin domain that is requesting a resource from the Host: cdn.keycdn.com

request headers example

Once cdn.keycdn.com receives the request, it responds by either allowing or denying the origin domain access to the requested resources based on the CORS settings configured. In the example below, it shows that the host responded with the response header of Access-Control-Allow-Origin: * . The “*” means all domains are allowed to access this resource.

response header example

JQuery with CORS

Due to their ability to perform advanced requests, cross domain AJAX requests are forbidden by default. With the use of CORS however, you have the ability to better define what methods are permitted. This helps increase website security all while having the ability to use features that otherwise would not be accessible.

Font Awesome CDN

Having CORS enabled is required to properly display font awesome icons when a CDN is implemented. If CORS is not enabled, the font awesome icons will not work and will look similar to the image below.

font-awesome-broken-with-CDN

Thankfully, enabling CORS is easy and can be done directly from the KeyCDN dashboard or from the origin server. Font awesome files can be downloaded and delivered from your origin server, however it is much more efficient to deliver them from a CDN URL. The Font Awesome icons file can be referenced from fontawesomecdn.com which has CORS enabled by default and allows for faster delivery thanks to 24+ POPs, HTTP/2 enabled edge servers, and GZIP compression.

Enabling CORS from the KeyCDN Dashboard

CORS is enabled by default in KeyCDN, however if you navigate to Zones > click the blue Manage Button > select Edit > and choose Show Advanced Features you have to option to enabled/disable CORS.

KeyCDN CORS Enabled

Enabling CORS on the Origin Server

In case you want to handle the CORS settings on your side, you have the option of configuring CORS on your origin server. To enable CORS for static resources such as css, fonts, javascript, and images add the following code to your server.

.htaccess

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css|js|gif|png|jpe?g|svg|svgz|ico|webp)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Nginx

location ~ \.(ttf|ttc|otf|eot|woff|font.css|css|js|gif|png|jpe?g|svg|svgz|ico|webp)$ {
           add_header Access-Control-Allow-Origin "*";
}

Make sure you test your website with various browsers, especially FF and IE, as they are known to cause problems if CORS is not handled correctly. Also, if once you have enabled CORS and there is still an issue that persist, try purging your CDN cache.

Leave A Comment?