资源被解释为样式表，但传输的 MIME 类型为 text/javascript。

Question

我使用MVC、JavaScript、JQuery、Ajax创建了一个应用程序。当我在Visual Studio中进行调试时，它能正常工作，没有任何脚本错误。但是，当我将应用程序托管到IIS服务器上时，控制台显示错误，并且我的应用程序样式不正确。我在下面附上了错误信息。

Error : Resource interpreted as Stylesheet but transferred with MIME type text/javascript:

图片：

- udayangana

---

你能展示一下在哪里配置JS bundles吗？应该有一个类在Global.asax中的Application_Start()方法中使用，像这样：BundleConfig.RegisterBundles(BundleTable.Bundles);。 - Georg Patscheider

Answer 1

我曾经遇到过完全相同的问题，是因为我的HTML中有以下形式的行：

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

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

- JohnG79

---

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

当我移除这个属性时，文件就无法下载了。它不会出现在Chrome的网络选项卡中……有什么提示吗？ - M.Parent

下面@hezi-yovel的答案总结了它，但请查看https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel：“在这种情况下，在<link>和<form>上，如果没有rel属性，没有关键字，或者如果不是以上若干个以空格分隔的关键字之一，则该元素不会创建任何链接。”此外，请查看https://www.w3.org/TR/2014/REC-html5-20141028/links.html#link-type-stylesheet。 - Alexei Danchenkov

答案可以说是破坏性的。为什么它会被接受为答案？永远不要从CSS链接中删除rel="stylesheet"。问题显然在服务器端。 - Сергей Гринько

Answer 2

由于声望低，我无法发表评论，但这非常重要。

那个回答说：

“我遇到了完全相同的问题，因为我的HTML中有以下形式的行：

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

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

这是非常错误的。rel="stylesheet"告诉浏览器这是一个CSS文件，没有它，浏览器不知道如何处理CSS文件，其中包含的任何设计代码将不会被执行。

我已经确认过，从我的HTML文件中删除所有rel="stylesheet"的出现：结果是一个完全“裸露”的页面，绝对没有任何设计。我已经链接了Bootstrap CSS和自己的非空CSS，并在删除rel="stylesheet"之前进行了测试，以验证样式实际上是通过它们进行修改的。

MIME类型由文件的发送者（即Web服务器）设置。错误消息表示服务器以纯文本形式发送的文件被浏览器解释为CSS。在这种情况下，问题存在于服务器而不是浏览器中。浏览器正确地将此CSS文件解释为样式表，服务器应该发送正确的MIME类型。

再次，很抱歉我将其发布为答案，尽管不是，但由于声望低，我无法发布评论。如果管理员正在阅读这篇文章并想要将其删除，请将其作为评论发布到相关答案中，或者如果可能的话将答案标记为错误，以免人们因此遭受痛苦。

- Hezi Yovel

Answer 3

我发现在我新的 Windows 10 设备上，我没有在本地 IIS 中启用静态内容。要实现这一点，请从控制面板中选择“打开或关闭 Windows 功能”，然后导航到以下位置： 确保已选中“静态内容”选项。然后，以管理员身份打开一个命令窗口并执行 iisreset。就这样，问题解决了。

- Jason Marsell

---

如果未启用此功能，JS解释器将遇到运行时错误。当您导航到开发人员工具->源并在页面加载时观看控制台时，您将看到运行时错误。如果启用了此功能，则返回True。 - Andile

Answer 4

我遇到了同样的问题，原因是使用错误的方法创建了bundle。我不小心复制了一个脚本bundle代码并将其替换为CSS。请确保您使用StyleBundle用于CSS和ScriptBundle用于JS。同样适用于渲染时，使用Styles.Render()和Scripts.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"));

我希望这可以帮助你。

- Alex

Answer 5

我刚刚遇到了同样的错误，发现服务器上并不存在 css 文件，因此返回了 404 页面。

所以，您需要验证 CSS 的链接。

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

以上信息可以被解释为：

您请求了一个 CSS 文件，但我们却向您发送了一个 JavaScript 文件。

如果要开始调试，我认为您应该首先确保文件来源。

希望这能帮助某个人。

- Uchephilz

Answer 6

我也遇到了 CRA 应用程序的这个问题。我只是清除了浏览器数据，这似乎已经解决了这个问题。可能是一些缓存文件导致了这个问题。

在清除浏览器数据之前，我在 Edge 和 Firefox 上检查了相同的构建，结果如预期一样工作。

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

- Vivek

Answer 7

我使用React时遇到了同样的错误，我通过在链接标签中删除type="text/css"来解决它，这样就没有错误了，并且我验证了CSS确实被下载了。

如果你删除rel="stylesheet"，虽然不会出现错误，但是CSS甚至都不会被下载，所以这不是一个解决方案，而是一个陷阱。

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

- hoogw

Answer 8

是的，我也看到了这个问题......这个问题是因为在 .htaccess 文件中添加了 RewriteRule 导致的...所以你需要改变 CSS 文件目录，然后它就会解决。

- Sammrafi

Answer 9

我有一个使用Angular 6和Docker的项目，遇到了这个错误。我已经尝试了很多合理的解决方案，但都没有对我起作用。我已经通过各种方式对这个错误进行了研究。 根据这里的答案，我已将其添加到我的nginx.conf文件中，如下所示。

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

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

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

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

- fatih

Answer 10

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

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

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

- joeshmoe301