jQuery.ajax() to grab a stringified version of a CSS File throws CORS error?

On my page, I load a css file from a CDN using a line like:

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudfare.com/whatever.css?abcdefg">

and the CSS loads great. After the page load, I have a javascript script that loops through all the linked stylesheets and tries to grab their contents as a string. So, using jQuery ajax, the code looks like:

//"links" is simply an array of all the linked stylesheets; each value is that link's href
$.each(links, function(i, v) {
   //Assume the first value in the loops is "//cdnjs.cloudfare.com/whatever.css?abcdefg"
    $.ajax(v, {
        mimeType: 'text/plain',
        dataType: 'text',
        complete: function(data) {
            console.log(data.responseText);
        }
    })
}

I get back the following CORS error in my console:

"XMLHttpRequest cannot load //cdnjs.cloudfare.com/whatever.css?abcdefg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://stackoverflow.com' is therefore not allowed access"

How is that possible? If the file was missing the CORS header, wouldn't it have been blocked when I tried to load the CSS as well? How did the first cal work fine, but now the CORS is failing? Is there anyway to load this CSS file as a text file without the server's cooperation?

Answers


Loading a CSS file into your page to be used as CSS via the link element is different to requesting it with XHR and trying to read its content.

CORS rightfully blocked you from doing that.

You can, however, get a parsed list of rules using JavaScript (I think Firefox can be picky at what it blocks though).

Start with the document.styleSheets value.


Try to load the file via $.get instead:

$.get( "ajax/test.html", function( data ) {
 alert( data );

});


Need Your Help