我想从理解问题开始

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

请求和响应都由一堆头部和一个(有时是可选的)包含一些内容的主体组成。

如果有一个主体，那么其中一个头是Content-Type，它描述了主体是什么(它是HTML文档吗?一个图像?表单提交的内容?等等)。

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

我已经查过了。Type and text/css已经在css上了。

那么，您的服务器的其他部分使样式表具有错误的内容类型。

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

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

更多信息:

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

因此，问题是服务器的大小写敏感性(与文件名有关)。

以防有人来到这个帖子，有类似的问题。我也遇到过类似的问题，但是解决方法很简单。

一名开发人员错误地丢失了一份网页副本。将config文件放到CSS目录下。删除后，所有错误都得到解决，页面正常显示。

使用角?

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

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

我有我的基础标签在错误的地方在头部，它应该来之前任何标签与url请求。基本上把它作为标题下面的第二个标签为我解决了这个问题。

<base href="/">

我在这里写了一篇小文章

我在MVC4中使用表单身份验证时遇到了类似的问题。问题出在web。config中的这一行，

<modules runAllManagedModulesForAllRequests="true">

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

将这一行更改为:

<modules runAllManagedModulesForAllRequests="false">

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

Our site loads the CSS files from an AWS Cloudfront distribution, which uses an S3 bucket as the origin. This particular S3 bucket was kept synced to a Linux server running Jenkins. The sync command via s3cmd sets the Content-Type for the S3 object automatically based on what the OS says (presumably based on the file extension). For some reason, in our server, all the types were being set correctly except .css files, which it gave the type text/plain. In S3, when you check the metadata in the properties of a file, you can set the type to whatever you want. Setting it to text/css allowed our site to correctly interpret the files as CSS and load correctly.

@Rob Sedgwick的回答给了我一个指针，然而，在我的情况下，我的应用程序是一个春季启动应用程序。所以我只是在我的安全配置中为相关文件的路径添加了排除…

说明—此解决方案基于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

还有一个路径叫做pages

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安全配置中添加如下排除项;

@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/**”可以消除错误。

干杯!

我在恢复一个旧的MEAN堆栈项目时遇到了同样的问题。我使用nodemon作为我的本地开发服务器，得到了相同的错误资源解释为样式表，但使用MIME类型text/html传输。我从nodemon更改为http-server，可以在这里找到。它立刻对我起了作用。

这是因为您必须将内容类型设置为文本/html而不是文本/css为您的服务器页面(php,node.js等)

使用角

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

注意:

我和laravel一起做后台

当我从谷歌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">

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

哪里##是你的文件夹，其中是你的。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" />

我也遇到过类似的问题。在这个奇妙的Stack Overflow页面中探索解决方案。

user54861的响应(大小写不匹配的名字)让我很好奇，再次检查我的代码，并意识到“我没有上传两个js文件，我在头标签中加载了它们”。: -)

当我上传他们的问题跑了!并且代码运行和页面呈现没有任何其他错误!

所以，这个故事的寓意是，不要忘记确保你所有的js文件都上传到了页面需要它们的地方。

我在一个。net应用程序中遇到了同样的问题，一个叫做MojoPortal的CMS开源程序。在我的一个特定网站的主题和皮肤中，在浏览或测试时，它会像窒息一样磨碎和变慢。

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

一旦设定好了，网站再次快速投入生产。

我也有这个错误的问题，并想出了一个解决方案。这并没有解释错误发生的原因，但似乎在某些情况下修复了它。

在css文件的路径前加上一个正斜杠/，如下所示:

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

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

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

我想扩展Todd R在op中的观点。在asp.net页面中，web。配置文件定义访问应用程序中每个文件或文件夹所需的权限。在我们的例子中，CSS文件文件夹不允许未经授权的用户访问，导致它在用户获得授权之前在登录页面上失败。更改web中所需的权限。通过修改CSS文件配置，可以防止非法用户访问CSS文件，解决了这一问题。

如果您使用的是JSP，则此问题可能来自您的servlet映射。 如果你的映射默认使用url，就像这样:

@WebServlet("/")

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

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

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

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

答案可以在上面给出。我也遇到过同样的问题，但无法解决。确保添加外部js文件为

<script src="main.js"></script>

有同样的错误，因为我忘记发送一个正确的头

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”。

如果nodejs和使用express 下面的代码工作…

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

In my case, same error was coming with JSP. This is how I got to the root of this issue: I went to the Network tab and clearly saw that the browser request to fetch the css was returning response header having "Content-type" : "text/html". I opened another tab and manually hit the request to fetch the css. It ended up returning a html log in form. Turns out that my web application had a url mapping for path = / Tomcat servlet entry : (@WebServlet({ "/, /index", }). So, any unmatching request URLs were somehow being matched to / and the corresponding servlet was returning a Log in html form. I fixed it by removing the mapping to /

此外，tomcat配置wrt处理css MIME-TYPE已经存在。

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

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

但发现文件扩展名必须被删除，所以这是有效的:

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

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

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

or

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

到nginx conf

我有同样的问题，几分钟后，我破译，我错过了添加文件扩展名到我的头。所以我改了下面这行:

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

to

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

我开始得到这个问题今天只在chrome和safari相同的项目/url为我的goormide容器(node.js)

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

1.设置;

2.向下滚动至底部，选择:“高级”;

3.向下滚动到底部，选择:“恢复设置到原始默认值”;

这似乎已经解决了这个问题，因为我不再在控制台中得到警告/错误，页面显示为它应该。阅读上面的帖子，似乎这个问题可以从任何数量的来源发生，所以设置重置是一个潜在的通用修复。 干杯

如果你在prod中提供应用程序，请确保你在service worker中提供静态文件。当我在Django上只提供React构建的静态子文件夹时，我遇到了这个错误(没有具有样式的资产)

使用的反应

我在我的react profile应用程序中遇到了这个错误。我的应用程序表现得有点像它试图引用一个不存在的url。我相信这与webpack的行为有关。

如果你在公用文件夹中链接文件，你必须记住在资源之前使用%PUBLIC_URL%，就像这样:

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

对于任何可能有这种问题的人。 当我遇到这个问题时，我正在用PHP构建一个自定义MVC。

我能够通过将我的资产(css/js/images)文件设置为绝对路径来解决这个问题。 而不是使用url像href="css/style.css"使用整个当前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。

希望这篇评论对你有所帮助。

I faced the same issue while configuring Postfix Admin 3.2. According to the official documentation, the whole Postfix Admin content should be extracted into a separate directory, i.e. /srv/postfixadmin and not the document root. Only the /srv/postfixadmin/public directory should be symlinked into /var/www/html document root. I have just extracted the whole content into /var/www/html. Having played with Nginx server block settings, I managed example.com/postfixadmin resolving from /var/www/html/postfixadmin/public. Nevertheless, images and CSS were not available with 404 status code. The stylesheets were broken. I got the error message OP quoted with respective 404 entries in access log.

在我的情况下，我只是移动/var/www/html/postfixadmin到/srv/postfixadmin和ln -s /srv/postfixadmin/公共/var/www/html/postfixadmin。这完全解决了问题。 这是参考资料。