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

我有这个问题。Chrome继续返回此错误

资源被解释为样式表，但以MIME类型text / html传输

受此错误影响的文件仅是Style，selected和jquery-gentleselect（以相同方式导入到索引中的其他CSS文件可以正常工作且没有错误）。我已经检查过我的MIME类型，并且text / css已经在CSS上。

老实说，我想从理解问题开始（看来我不能独自做一件事）。

我想从了解问题开始

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

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

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

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

我已经检查过myme.type和text / css已经在CSS上了。

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

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

使用Angular吗？

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

基本标签不仅需要位于头部，而且还必须位于正确的位置。

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

<base href="/">

我在这里写了一个小贴子

我也有此错误的问题，并提出了解决方案。这不能解释为什么会发生错误，但是在某些情况下似乎可以解决该问题。

在css文件的路径之前添加正斜杠 /，如下所示：

<link rel="stylesheet" href="https://stackoverflow.com/css/bootstrap.min.css">

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

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

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

哪里 ##您的文件夹 .CSS文件

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

将匿名身份验证凭据设置为应用程序池标识对我来说很成功。

我也面临着同样的问题。在进行了一些研发之后，我发现问题出在文件名上。实际文件的名称为“ lightgallery.css”，但在链接时我键入了“ lightGallery.css”。

更多信息：

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

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

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

我们的网站从AWS Cloudfront分发加载CSS文件，该分发使用S3存储桶作为源。这个特定的S3存储桶被保持与运行Jenkins的Linux服务器同步。该sync命令via s3cmd根据OS所说的内容（可能基于文件扩展名）自动设置S3对象的Content-Type。由于某种原因，在我们的服务器中，所有类型均已正确设置，但.css文件赋予类型text/plain。在S3中，当您检查文件属性中的元数据时，可以将类型设置为所需的任何类型。将其设置为text/css允许我们的网站将文件正确解释为CSS并正确加载。

如果您通过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 conf

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

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

但是，需要注意的是：

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

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

名为“插件”的路径

http：// localhost：8080 / plugins / styles / css / file-1.css

http：// localhost：8080 / plugins / styles / css / file-2.css

http：// localhost：8080 / plugins / js / script-file.js

还有一个称为“页面”的路径

http：// localhost：8080 / pages / styles / css / style-1.css

http：// localhost：8080 / pages / styles / css / style-2.css

http：// localhost：8080 / pages / js / scripts.js

然后，我只需在Spring Boot Security Config中添加以下排除项即可；

@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
    }

}

干杯!

使用角度

就我而言，使用ng-href而不是href为我解决了它。

注意 ：

我正在使用laravel作为后端

我面对着同样的事情，用同样的.htaccess文件制作漂亮的网址。经过几个小时的环顾和实验。我发现错误是由于相对链接的文件。

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

为了解决这个问题，您可以使用<base>html来源上的标记，

<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" />

如果您使用的是JSP，则此问题可能来自您的servlet映射。如果您的映射采用defaut的网址，例如：

@WebServlet("/")

然后容器会解析您的CSS网址，然后转到servlet，而不是转到CSS文件。

我遇到了同样的问题，我更改了映射，现在一切正常

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

<modules runAllManagedModulesForAllRequests="true">

这意味着每个请求（包括对静态内容的请求）都将被认证。

将此行更改为：

<modules runAllManagedModulesForAllRequests="false">

我最近在chrome上也遇到了这个问题。我只是给出CSS文件问题解决的绝对路径。

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

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

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

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

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

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

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

这没有错误：

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

但这给出了错误Resource解释为样式表，但以MIME类型text / html传输：

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

我面临着类似的问题。在这个奇妙的堆栈溢出页面中探索解决方案。

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

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

因此，故事的寓意是不要忘记确保将所有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; }';

使用ReactJs时，当我使用相对链接（例如）将样式文件添加到index.html时

<link rel="stylesheet" href="./css/style.css">

然后我导航到一条路线说；localhost:3000/artist然后刷新，我得到了错误。

我用绝对链接代替相对链接后，错误消失了；

<link rel="stylesheet" href="http://localhost/project/public/css/style.css"。

在为通过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');

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

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

至

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

我今天开始只在Chrome上遇到此问题，而对于goormide容器（node.js）的同一个项目/ URL，却没有使用Safari浏览器

在尝试了上面的一些建议后，这些建议似乎没有用，并回溯了我从昨天到今天所做的一些代码更改，这些更改也没有影响，我最终在chrome设置中单击：

1.设置;

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

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

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

如果您要在产品中提供该应用程序，请确保您正在与Service Worker一起提供静态文件。当我仅在Django上服务React构建的静态子文件夹时（没有具有样式的资产），我遇到了此错误

使用React

我在我的个人资料应用程序中遇到了此错误。我的应用程序的行为有点像试图引用不存在的URL。我相信这与webpack的行为有关。

如果要链接公用文件夹中的文件，则必须记住在使用如下资源之前先使用％PUBLIC_URL％：

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