资源解释为样式表，但使用 MIME 类型 text/html 传输（似乎与 Web 服务器无关）

我想从了解问题开始

浏览器向服务器发出 HTTP 请求。然后服务器做出 HTTP 响应。

请求和响应都包含一堆标头和一个（有时是可选的）正文，其中包含一些内容。

如果有正文，那么其中一个标题是 Content-Type，它描述了正文是什么（它是 HTML 文档吗？图像？表单提交的内容？等等）。

当您请求样式表时，服务器告诉浏览器它是 HTML 文档 (Content-Type: text/html) 而不是样式表 (Content-Type: text/css)。

我已经检查了 myme.type 并且 text/css 已经在 css 上。

然后关于您的服务器的其他一些事情使该样式表带有错误的内容类型。

使用浏览器开发人员工具的“网络”选项卡检查请求和响应。

---

使用角度？

这是要记住的一个非常重要的警告。

基本标签不仅需要在头部，而且需要在正确的位置。

我的基本标签在头部的错误位置，它应该出现在任何带有 url 请求的标签之前。基本上将它作为标题下方的第二个标签为我解决了它。

<base href="/">

我在上面写了一个小帖子here

---

我也遇到了这个错误，并找到了解决方案。这并不能解释为什么会发生错误，但它似乎在某些情况下可以修复它。

在 css 文件的路径之前包含一个正斜杠 /，如下所示：

<link rel="stylesheet" href="/css/bootstrap.min.css">

---

我的问题比这篇文章中的所有答案都简单。

我必须设置 IIS 以包含静态内容。

https://i.stack.imgur.com/RVg0G.png

---

将匿名身份验证凭据设置为应用程序池身份对我来说是诀窍。

https://i.stack.imgur.com/JSZg6.png

---

试试这个<link rel="stylesheet" type="text/css" href="../##/yourcss.css">

其中 ## 是您的文件夹，其中是您的 .CSS - 文件

不要忘记：..（双点）。

---

我也面临同样的问题。并且在做了一些研发之后，我发现问题出在文件名上。实际文件的名称是“lightgallery.css”，但在链接时我输入了“lightGallery.css”。

更多信息：

它在我的本地主机上运行良好（操作系统：Windows 8.1 和服务器：Apache）。但是当我将我的应用程序上传到远程服务器（与我的本地主机不同的操作系统和 Web 服务器）时，它不起作用，给了我和你一样的错误。

因此，问题在于服务器的区分大小写（相对于文件名）。

---

如果您使用 nginx 提供静态 css，您应该添加

location ~ \.css {
    add_header  Content-Type    text/css;
}
location ~ \.js {
    add_header  Content-Type    application/x-javascript;
}

或者

location ~ \.css{
    default_type text/css;
}
location ~ \.js{
    default_type application/x-javascript;
}

到 nginx 配置文件

---

根据其他答案，这条消息似乎有很多原因，我想我只是分享我的个人解决方案，以防将来有人遇到我的确切问题。

我们的站点从使用 S3 存储桶作为源的 AWS Cloudfront 发行版加载 CSS 文件。这个特殊的 S3 存储桶与运行 Jenkins 的 Linux 服务器保持同步。通过 s3cmd 的 sync 命令根据操作系统所说的（可能基于文件扩展名）自动设置 S3 对象的 Content-Type。出于某种原因，在我们的服务器中，所有类型都设置正确，除了 .css 文件，它给出了类型 text/plain。在 S3 中，当您检查文件属性中的元数据时，您可以将类型设置为您想要的任何类型。将其设置为 text/css 可以让我们的网站正确地将文件解释为 CSS 并正确加载。

---

@Rob Sedgwick 的回答给了我一个指针，但是，在我的情况下，我的应用程序是一个 Spring Boot 应用程序。所以我只是在我的安全配置中为相关文件的路径添加了排除项......

注意 - 此解决方案是基于 SpringBoot 的......您可能需要做的事情可能会根据您使用的编程语言和/或您使用的框架而有所不同

但是要注意的一点是；

本质上，当每个请求（包括静态内容的请求）都经过身份验证时，可能会导致问题。

因此，假设一些导致错误的静态内容的路径如下；

称为“插件”的路径

http://localhost:8080/plugins/styles/css/file-1.css http://localhost:8080/plugins/styles/css/file-2.css http://localhost:8080/plugins/js/脚本文件.js

还有一条叫做“pages”的路径

http://localhost:8080/pages/styles/css/style-1.css http://localhost:8080/pages/styles/css/style-2.css http://localhost:8080/pages/js/脚本.js

然后我只需在我的 Spring Boot 安全配置中添加如下排除项；

@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
@Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
            .antMatchers(<comma separated list of other permitted paths>, "/plugins/**", "/pages/**").permitAll()
            // other antMatchers can follow here
    }

}

从身份验证中排除这些路径“/plugins/**”和“/pages/**”使错误消失。

干杯!

---

使用角度

在我的情况下，使用 ng-href 而不是 href 为我解决了这个问题。

笔记 ：

我正在使用 laravel 作为后端

---

如果您使用 JSP，则此问题可能来自您的 servlet 映射。如果您的映射默认使用 url，如下所示：

@WebServlet("/")

然后容器解释您的 css url，并转到 servlet 而不是转到 css 文件。

我有同样的问题，我改变了我的映射，现在一切正常

---

我面临着同样的事情，使用相同的 .htaccess 文件来制作漂亮的 url。经过几个小时的环顾和试验。我发现错误是因为相对链接文件。

浏览器将开始为所有 css、js 和图像文件获取相同的源 html 文件，此时我将浏览几个步骤深入服务器。

为了解决这个问题，您可以在 html 源代码中使用 <base> 标记，

<base href="http://localhost/assets/">

并链接到文件，例如，

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/script.js"></script>

或对所有文件使用绝对链接。

<link rel="stylesheet" type="text/css" href="http://localhost/assets/css/style.css" />
<script src="http://localhost/assets/js/script.js"></script>
<img src="http://localhost/assets/images/logo.png" />

---

我在使用表单身份验证的 MVC4 中有类似的问题。问题是 web.config 中的这一行，

<modules runAllManagedModulesForAllRequests="true">

这意味着每个请求（包括静态内容的请求）都经过身份验证。

将此行更改为：

<modules runAllManagedModulesForAllRequests="false">

---

https://i.stack.imgur.com/nfxaV.png

<link rel="stylesheet" href="<?=SS_URL?>arica/style.css" type="text/css" />

---

对于任何可能遇到此问题的人。遇到此问题时，我正在用 PHP 构建自定义 MVC。

我可以通过将我的资产（css/js/images）文件设置为绝对路径来解决这个问题。而不是使用像 href="css/style.css" 这样的 url，它使用整个当前 url 来加载它。例如，如果您在 http://example.com/user/5，它将尝试在 http://example.com/user/5/css/style.css 加载。

要修复它，您可以在资产 url 的开头添加 / （即 href="/css/style.css"）。这将告诉浏览器从您的 url 的根目录加载它。在此示例中，它将尝试加载 http://example.com/css/style.css。

希望此评论对您有所帮助。

---

这是因为您必须将服务器页面（php、node.js 等）的内容类型设置为 text/html 而不是 text/css

---

我想在 OP 中扩展 Todd R 的观点。在 asp.net 页面中，web.config 文件定义了访问应用程序中每个文件或文件夹所需的权限。在我们的例子中，CSS 文件的文件夹不允许未经授权的用户访问，导致它在用户被授权之前在登录页面上失败。更改 web.config 中的所需权限允许未经授权的用户访问 CSS 文件并解决此问题。

---

我有同样的问题，经过几分钟的闲逛，我发现我错过了将文件扩展名添加到我的标题中。所以我更改了以下行：

<link uic-remove rel="stylesheet" href="css/bahblahblah">

至

<link uic-remove rel="stylesheet" href="css/bahblahblah.css"> 

---

使用反应

我在我的反应配置文件应用程序中遇到了这个错误。我的应用程序的行为有点像它试图引用一个不存在的 url。我相信这与 webpack 的行为方式有关。

如果您要链接公用文件夹中的文件，您必须记住在资源之前使用 %PUBLIC_URL%，如下所示：

<link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/bootstrap.min.css" />

---

万一有人来到这篇文章并有类似的问题。我刚刚遇到了类似的问题，但解决方案非常简单。

开发人员错误地将 web.config 的副本放入 CSS 目录。删除后，所有错误均已解决，并且页面正确显示。

---

我在恢复旧 MEAN 堆栈项目的工作时遇到了同样的问题。我使用 nodemon 作为我的本地开发服务器并得到相同的错误 Resource interpreted as stylesheet but transferred with MIME type text/html。我从 nodemon 更改为 http-server，可以找到 here。它立即对我有用。

---

当我从 google CDN 提供的 css 样式表的 css 链接中删除协议时，就会发生这种情况。

这没有错误：

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Architects+Daughter">

但这给出了错误资源解释为样式表但使用 MIME 类型 text/html 传输：

<link rel="stylesheet" href="fonts.googleapis.com/css?family=Architects+Daughter">

---

我面临着类似的问题。并在这个奇妙的 Stack Overflow 页面中探索解决方案。

user54861 的响应（区分大小写的名称不匹配）让我好奇地再次检查我的代码并意识到“我没有上传两个我在 head 标签中加载它们的 js 文件”。 :-)

当我上传它们时，问题就消失了！并且代码运行和页面呈现没有任何其他错误！

因此，故事的寓意是不要忘记确保将所有 js 文件上传到页面正在寻找它们的位置。

---

我在 .NET 应用程序中遇到了同样的问题，这是一个名为 MojoPortal 的 CMS 开源软件。在我的一个特定站点的主题和皮肤中，当浏览或测试时，它会像窒息一样磨碎和减速。

我的问题不是 CSS 的“类型”属性，而是“其他东西”。我的确切更改是在 Web.Config 中。我将 MinifyCSS、CacheCssOnserver 和 CacheCSSinBrowser 的所有值都更改为 FALSE。

一旦设置好，网站就可以再次快速投入生产。

---

有同样的错误，因为我忘了先发送正确的标题

header("Content-type: text/css; charset: UTF-8");
print 'body { text-align: justify; font-size: 2em; }';

---

我在为使用 npm 安装的 React 布局模块加载 CSS 时遇到了这个问题。你必须导入两个 .css 文件才能运行这个模块，所以我最初是这样导入它们的：

@import "../../../../node_modules/react-grid-layout/css/styles.css";

但发现必须删除文件扩展名，所以这行得通：

@import "../../../../node_modules/react-grid-layout/css/styles";

---

如果 nodejs 并使用 express 下面的代码工作......

res.set('Content-Type', 'text/css');

---

我今天开始只在 chrome 上遇到问题，而不是在我的 goormide 容器（node.js）的同一个项目/url 的 safari 上

在尝试了上面的几个似乎不起作用的建议并回溯了我从昨天到今天所做的一些代码更改之后，这也没有任何区别，我最终在 chrome 设置中单击：

1.设置；

2.向下滚动到底部，选择：“高级”；

3.向下滚动至底部，选择：“将设置恢复为原始默认值”；

这似乎已经解决了问题，因为我不再在控制台中收到警告/错误，并且页面按原样显示。阅读上面的帖子，似乎问题可能来自任意数量的来源，因此重置设置是一个潜在的通用修复。干杯

---

如果您在 prod 中为应用程序提供服务，请确保您使用服务人员提供静态文件。当我在 Django 上仅提供 React 构建的静态子文件夹时出现此错误（没有具有样式的资产）

---