Resource Sharing Issue (CORS)

I store a font (font-awsome) in a Rackspace CDN and use it on my website. The font won't load and the error message is:

    Font from origin 'http://some address.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 'http://www.my domain.com' is therefore not allowed access. 

      

I know this is a CORD issue, so I used the rackspace API to set Access-Control-Allow-Origin for both container and file Access-Control-Allow-Origin: *

. Checking with the command curl

:

   curl -I -X HEAD http://some addresss.rackcdn.com/production/assets/fontawesome-webfont-5019d8b3ed6173ce677c8fb2cfaf70c4.ttf

      

Result:

    HTTP/1.1 200 OK
    Last-Modified: Wed, 10 Sep 2014 07:20:04 GMT
    ETag: c4668ed2440df82d3fd2f8be9d31d07d
    X-Timestamp: 1410333603.37481
    Access-Control-Allow-Origin: *
    Content-Type: application/x-font-truetype
    X-Trans-Id: txbcf7f6de9f7848359081c-00540ffbd4dfw1
    Cache-Control: public, max-age=259176
    Expires: Sat, 13 Sep 2014 07:20:28 GMT
    Date: Wed, 10 Sep 2014 07:20:52 GMT
    Connection: keep-alive

      

I can also download the font by typing the URL into the address bar in the browser. However, I still cannot use this font on my website, the previous error message still exists.

I also tried to check with javascript:

    request = new XMLHttpRequest()
    request.open('GET', 'http://my file url);
    request.send(null)

      

Error message

   XMLHttpRequest cannot load http://my file url. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.google.com' is therefore not allowed access. 

      

Seems Access-Control-Allow-Origin: *

not enough for a CORS problem. What do I need to add to the CDN header configuration in rackspace / or my website in order to use a font from the Rackspace CDN?

Thank!

+3


source to share





All Articles