资源解释为样式表，但使用 MIME 类型 text/javascript 传输

Posted 2023-03-05

【中文标题】资源解释为样式表，但使用 MIME 类型 text/javascript 传输

【英文标题】：Resource interpreted as Stylesheet but transferred with MIME type text/javascript

【发布时间】：2017-06-03 17:59:45

【问题描述】：

我使用 MVC、Java Script、JQuery、Ajax 创建了一个应用程序。当我使用 Visual Studio 进行调试时，它工作正常，没有任何脚本错误。当我在 IIS 服务器上托管我的应用程序时，它显示控制台错误并且我的应用程序样式无法正常工作。我附上了下面的错误。

错误：资源解释为样式表，但使用 MIME 类型文本/javascript 传输：

图片：

【问题讨论】：

你能显示你在哪里配置 js 包吗？应该有一个类在 Global.asax Application_Start() 中使用，如下所示：BundleConfig.RegisterBundles(BundleTable.Bundles);

【参考方案1】：

我遇到了完全相同的问题，原因是我的 html 中的行格式如下：

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

当我从标签中删除 rel="stylesheet" 时，问题得到了解决。

【讨论】：

这对我有用。我正在添加一个使用document.createElement("link") 和setAttribute("rel", "stylesheet") 创建的链接，并且在我的开发人员工具中弹出了警告。我仍然不确定为什么它会为动态生成的链接元素产生这样的警告。

当我删除这个属性时，文件不再被下载。它没有显示在 chrome 的网络选项卡中......有什么提示吗？

下面@hezi-yovel 的回答总结了一下，但请查看developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel：“在这种情况下，在 和

答案是破坏性的，至少可以这么说。为什么它是一个公认的答案？永远不要从 css 链接中删除 rel="stylesheet"。问题显然出在服务器端。

【参考方案2】：

由于代表人数少，我无法发表评论，但这非常重要。

答案是：

“我遇到了完全相同的问题，原因是我的 HTML 中的行格式如下：

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

当我从标签中删除 rel="stylesheet" 后，问题得到了解决。"

大错特错。 rel="stylesheet" 告诉浏览器这是一个 css 文件。没有它，浏览器不知道如何处理 CSS 文件，并且其中的任何设计代码都不会被执行。

我通过从我的 html 文件中删除所有出现的 rel="stylesheet" 来确认这一点：结果是一个完全“裸”的页面，完全没有任何设计。我已经链接了引导 css 和我自己的非空 css，并在删除 rel="stylesheet" 之前对其进行了测试，以查看样式实际上是由它们修改的。

Mime 类型由文件的发送者设置，在本例中为 Web 服务器。错误消息表明服务器以纯文本形式发送的文件被浏览器解释为 CSS。在这种情况下，问题出在服务器上，而不是浏览器上。浏览器正确地将此 CSS 文件解释为样式表。服务器应该已经发送了正确的 mime 类型。

再次，很抱歉我将其发布为答案，即使它不是，但由于代表低，我无法发布 cmets。如果版主正在阅读此内容并希望将其删除，请将其作为对相关答案的评论发布，或者如果可能将答案标记为错误，这样人们就不会因此而受苦。

【参考方案3】：

我意识到在我的新 Windows 10 机器上，我无法在本地 IIS 中启用静态内容。为此，请从控制面板转到“打开或关闭 Windows 功能”，然后导航到以下位置：

确保选中此“静态内容”选项。然后，以管理员身份打开命令窗口并执行 iisreset。

繁荣，已修复。

【讨论】：

True，如果未启用，JS 解释器将遇到运行时错误，当您导航到开发人员工具 -> 源并在页面加载时观察控制台时，您将看到运行时错误.

【参考方案4】：

我遇到了同样的问题，这是由于使用了错误的方法来创建捆绑包。我不小心复制了一个脚本包代码并将其替换为 CSS。确保您使用 StyleBundle for CSS 和 ScriptBundle for JS。与渲染时相同。 样式.Render() 和脚本.Render()。

我有这个：

bundles.Add(new ScriptBundle("~/bundles/bootstrap-core-css").Include("~/Content/themes/bootstrap/css/bootstrap.min.css"));

我改成：

bundles.Add(new StyleBundle("~/bundles/bootstrap-core-css").Include("~/Content/themes/bootstrap/css/bootstrap.min.css"));

我希望这会有所帮助。

【参考方案5】：

我现在遇到同样的错误，我发现服务器上不存在css文件，所以它返回了一个404页面。

所以，你需要验证css的链接。

资源解释为样式表，但使用 MIME 类型 text/javascript 传输

上面的信息可以解释为：

您请求了一个 css 文件，但我们正在向您发送一个 javascript 文件。

如果要开始调试，我认为你应该从确保文件的来源开始。

我希望这对某人有所帮助。

【参考方案6】：

是的，我也看到了这个问题...这个问题是因为在 .htaccess 中添加了 RewriteRule ...所以 你必须改变css文件目录然后它会修复

【参考方案7】：

我在使用 CRA 应用时也遇到了这个问题。我刚刚清除了我的浏览器数据，这似乎已经解决了这个问题。可能是某些缓存文件造成的。

在清除浏览器数据之前，我在 edge 和 firefox 上检查了相同的构建，它按预期工作。

错误：资源被解释为样式表，但使用 MIME 类型 text/html 传输：“https://abcxyz.com/static/css/2.0ce10a16.chunk.css”。

【参考方案8】：

另一种可能性是，如果您的 web.config 文件中有小写重写规则，类似于：

<rule name="LowerCaseRule1" stopProcessing="true">
    <match url="[A-Z]" ignoreCase="false" />
    <action type="Redirect" url="ToLower:URL" />
</rule>

如果包含此类规则，则需要确保所有脚本和样式表链接都是小写的。如果不是，您可能会看到此警告。

【参考方案9】：

我有一个使用Docker 的Angular 6 项目并遇到了这个错误。我在这里尝试了许多明智的解决方案，但没有一个对我有用。我以各种方式对此错误进行了研究。 根据答案here，我已将其添加到我的nginx.conf 文件中，如下所示。

我的nginx.conf 文件已更改为以下内容：

http

    # The line added.
    include /etc/nginx/mime.types;

    server 
        listen 80;
        listen [::]:80;
        server_name _;
        ...
    
    ...

添加后，我的问题得到解决，项目成功运行。 我希望这个答案能帮助那些正在寻找问题答案的人。

【参考方案10】：

我使用 react，得到同样的错误，我通过删除链接标签中的 type="text/css" 来修复， 没有错误，我验证了 css 确实被下载了。

如果你删除 rel="stylesheet"，没有错误，但 css 甚至不会下载，所以这不是解决方案，这是一个陷阱

        <link href="../src/css/gps/sidenav.css" rel="stylesheet" />