I am getting the following error on our live site in Chrome due to embedded font files in CSS all on our rackspace CDN:
Font from origin 'https://aaa-aaa.ssl.cf3.rackcdn.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.mysite.co.uk' is therefore not allowed access.
How do I add the Access-Control-Allow-Origin header on to the response when GETting these files from the CDN?
Finally worked this out from the docs and some help from the Rackspace crew.
Importantly, for CDN enabled containers containing only CDN files, there is no point adjusting the container's meta-headers. These are only inherited by files not on the CDN.
I had to adjust the response headers on the font files themselves. Unfortunately this is only currently supported through the API and I used curl from the command line in Windows 7.
Authenticating
RACKSPACE DOCS
First step is to authenticate:
Then extract the
id
of thetoken
from the response and thepublicURL
of theendpoint
related tocloudFiles
. I copied the response to Notepad++ and searched fortoken
andcloudfiles
respectively.Adjusting file response headers
RACKSPACE DOCS
I tried adjusting the headers with the following command:
Did it work?
I got a
HTTP/1.1 2xx
response and checked it worked with:Unfortunately you have to wait for the file's TTL to expire, or purge it to see a live result. When I did this it was taking over a day to do an edge purge. I checked the live version with:
Setting file response headers on upload
I settled on adding a version to my file and adding the headers during the upload:
Performed from my local directory where the file
my-site-icons.tff
was located