Search code examples
corscdnrackspace-cloudfiles

Cross-Origin Resource Sharing (Access-Control-Allow-Origin header) Rackspace Cloudfiles CDN

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?

Solution

  • 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:

    curl -d "{\"auth\":{\"RAX-KSKEY:apiKeyCredentials\":{\"username\":\"my_username\",\"apiKey\":\"my_api_key\"}}}" -H "Content-Type: application/json" "https://identity.api.rackspacecloud.com/v2.0/tokens"

    Then extract the id of the token from the response and the publicURL of the endpoint related to cloudFiles. I copied the response to Notepad++ and searched for token and cloudfiles respectively.

    Adjusting file response headers

    RACKSPACE DOCS

    I tried adjusting the headers with the following command:

    curl -i -XPOST -H "x-auth-token: my-auth-token" -H "Access-Control-Expose-Headers: Access-Control-Allow-Origin" -H "Access-Control-Allow-Origin: *" https://storage101.lon3.clouddrive.com/v1/MossoCloudFS_my-end-point/container/pseudo-dir1/psuedo-dir2/my-site-icons.ttf

    Did it work?

    I got a HTTP/1.1 2xx response and checked it worked with:

    curl -i -XGET -H "X-Auth-Token: my-auth-token" https://storage101.lon3.clouddrive.com/v1/MossoCloudFS_my-end-point/container/pseudo-dir1/psuedo-dir2/my-site-icons.ttf

    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:

    curl -i -XGET https://live-version-container-hash.ssl.cf3.rackcdn.com/pseudo-dir1/psuedo-dir2/my-site-icons.ttf

    Setting file response headers on upload

    I settled on adding a version to my file and adding the headers during the upload:

    curl -i -XPUT -H "x-auth-token: my-auth-token" -H "Access-Control-Expose-Headers: Access-Control-Allow-Origin" -H "Access-Control-Allow-Origin: *" https://storage101.lon3.clouddrive.com/v1/MossoCloudFS_my-end-point/container/pseudo-dir1/psuedo-dir2/my-site-icons1.0.0.ttf -T my-site-icons.tff

    Performed from my local directory where the file my-site-icons.tff was located