jQuery.ajax()获取CSS文件的字符串化版本会引发CORS错误?

时间:2014-03-10 04:23:11

标签: jquery ajax css3 cors

在我的页面上,我使用类似以下的行从CDN加载css文件:

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

并且CSS加载很棒。页面加载后,我有一个javascript脚本循环遍历所有链接的样式表,并尝试抓取其内容作为字符串。因此,使用jQuery ajax,代码如下:

//"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);
        }
    })
}

我在控制台中找回了以下CORS错误:

"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"

怎么可能?如果文件丢失了CORS标题,那么在我尝试加载CSS时它是否会被阻止?第一个cal如何工作正常,但现在CORS失败了?无论如何在没有服务器合作的情况下将此CSS文件加载为文本文件?

2 个答案:

答案 0 :(得分:1)

通过link元素将CSS文件加载到页面中以用作CSS,这与使用XHR请求它并尝试读取其内容不同。

CORS正确阻止你这样做。

但是,您可以使用JavaScript获取已解析的规则列表(我认为Firefox可能会对它所阻止的内容感到挑剔)。

document.styleSheets值开始。

答案 1 :(得分:0)

尝试通过$ .get加载文件:

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

});