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

Posted 2023-03-04

【中文标题】jQuery.ajax() 获取 CSS 文件的字符串化版本会引发 CORS 错误？

【英文标题】：jQuery.ajax() to grab a stringified version of a CSS File throws CORS error?

【发布时间】：2014-04-13 01:51:13

【问题描述】：

在我的页面上，我使用如下行从 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://***.com' is therefore not allowed access"

这怎么可能？如果该文件缺少 CORS 标头，那么当我尝试加载 CSS 时它不会被阻止吗？第一次校准如何正常工作，但现在 CORS 失败了？有没有办法在没有服务器合作的情况下将此 CSS 文件加载为文本文件？

【参考方案1】：

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

CORS 正确地阻止了你这样做。

但是，您可以使用 JavaScript 获取已解析的规则列表（但我认为 Firefox 可能对它所阻止的内容很挑剔）。

从document.styleSheets 值开始。

【讨论】：

遗憾的是，我正在使用的浏览器（Chrome）不允许这样做；链接器样式表规则使用 document.styleSheets 属性是不透明的。无论如何要使用 XHR 来获取 CSS 文件的文本，还是我只是在这个上使用 SOL？哦，好听的名字。这就像一个 1 个字母的推特句柄。

@AlexZ 我很确定你可以在 Stack Overflow 上有重复的名字，所以这没什么特别的 :) 我在尝试获取原始 CSS 数据时遇到了麻烦，特别是如果它托管在外部的 CDN 上你的控制。上次我不得不使用提供给 JavaScript 的数据。

【参考方案2】：

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

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

);

【讨论】：

相同的结果 - 我希望我可以使用 jQuery .ajax 绕过 CORS 限制，但我想不会。

$.get() 只是$.ajax() 的sugar，最终都通过XHR（好吧，除了古老的IE）。

看看这是否有帮助：***.com/questions/9320982/…