How to set up Same-origin policy / Cross-origin resource sharing (CORS) in OnApp CDN?

Question:

How to set up Same-origin policy / Cross-origin resource sharing (CORS) in OnApp CDN?

Environment:

OnApp CDN

Answer:

Web browsers do not permit fonts to be loaded from a different domain unless CORS headers are setup to allow it.

This problem can be seen in the browser console:

Font from origin 'http://cdn.example.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 'http://www.example.com' is therefore not allowed access.

Instructions to enable permissive CORS headers for fonts

1. Add to your webserver config:

Apache

<FilesMatch "\.(eot|otf|ttf|woff|svg)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Nginx

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

2. Verify that the headers are returned by the origin server as expected.

3. Purge the fonts from the CDN so that the headers are refreshed.

Additionally, please note that for a push resource you will need to add it via HTTP caching rules on the resource in the UI.