Question

我在尝试加载本地CSS文件（例如theme.css）时遇到问题，如下所示：

   <link rel="stylesheet" type="text/css" href="theme.css">

我正在使用Chrome（但我也在Microsoft Edge中尝试过），但该文件无法加载。它将永远（待定）卡住。如果删除“ rel”属性，则文件将正确加载，没有任何问题。

我已经成为开发人员已有几年了（尽管我已经有一段时间没有从事这种低水平的工作了），而且我不记得曾经遇到过这个问题。

我知道对于某些人来说这似乎有些愚蠢，但是我很好奇为什么会这样。

编辑：

我正在使用Nodejs返回以下代码：

var server = http.createServer(function(req, res) {
     var page = url.parse(req.url).pathname; 
    if (page == '/') {
        index = 0;
        fs.readFile('index.html', function(err, data) {
            res.writeHead(200, {"Content-Type": "text/html"});
            res.write(data);
            res.end();

我认为我已经开始了解这个问题。是因为我正在使用Nodejs读取html文件，并且该文件无法动态返回内部指定的css文件吗？

Answer 1

我已经意识到问题出在哪里。因为我正在使用node.js来提供服务器（在本例中为localhost）文件，所以我需要专门为请求中的文件提供服务（例如，具有到script.js和theme.css的路由）。我认为简单地返回包含文件（本地）的html就足够了，因为打开index.html会返回js和css文件而没有任何问题。我不确定rel =“ stylesheet”为什么会影响文件是否仍然可以加载。

谢谢您的帮助。

Answer 2

从您的评论来看，问题似乎与从https访问非https资源有关。

请参阅以下有关引荐政策的链接：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy

关于与CSS集成的重要部分：

CSS可以获取样式表中引用的资源。这些资源   也在遵循引荐来源网址政策。

外部CSS样式表使用默认策略   （no-referrer-when-downgrade），除非通过HTTP覆盖   专门为CSS样式表设置的标头。

对于内联样式或通过HTMLElement.style之类的API创建的样式，   使用所有者文档的引荐来源网址政策。

我的猜测是，当设置rel属性时，它将使用默认策略，但是当未设置rel属性时，它将使用文档策略。这是一个奇怪的互动，我不确定它是否应该那样工作。

编辑：我可以从您的更新中看到您没有使用HTTPS，所以我不确定为什么这是有意义的。您评论中的消息肯定引用了引荐来源网址政策，我看到了这一点并得出了合乎逻辑的结论。

现在我不确定。现在，我要离开这个答案，如果出现另一个正确的想法，我可以删除它

为什么添加“ rel ='stylesheet'”阻止本地CSS文件在浏览器中加载？

2 个答案: