我有这个问题。Chrome继续返回此错误
资源解释为样式表,但以MIME类型text/html传输
受此错误影响的文件只有Style、chosen和jquery-gentleselect(以相同方式导入索引的其他CSS文件工作良好且没有错误)。我已经检查了我的MIME类型和文本/css已经在css上。
老实说,我想从理解问题开始(这似乎是我一个人做不到的事情)。
我有这个问题。Chrome继续返回此错误
资源解释为样式表,但以MIME类型text/html传输
受此错误影响的文件只有Style、chosen和jquery-gentleselect(以相同方式导入索引的其他CSS文件工作良好且没有错误)。我已经检查了我的MIME类型和文本/css已经在css上。
老实说,我想从理解问题开始(这似乎是我一个人做不到的事情)。
当前回答
我在恢复一个旧的MEAN堆栈项目时遇到了同样的问题。我使用nodemon作为我的本地开发服务器,得到了相同的错误资源解释为样式表,但使用MIME类型text/html传输。我从nodemon更改为http-server,可以在这里找到。它立刻对我起了作用。
其他回答
我想从理解问题开始
浏览器向服务器发出HTTP请求。然后服务器做出一个HTTP响应。
请求和响应都由一堆头部和一个(有时是可选的)包含一些内容的主体组成。
如果有一个主体,那么其中一个头是Content-Type,它描述了主体是什么(它是HTML文档吗?一个图像?表单提交的内容?等等)。
当您请求样式表时,服务器会告诉浏览器这是一个HTML文档(Content-Type: text/ HTML),而不是一个样式表(Content-Type: text/css)。
我已经查过了。Type and text/css已经在css上了。
那么,您的服务器的其他部分使样式表具有错误的内容类型。
使用浏览器开发人员工具的Net选项卡检查请求和响应。
我在为一个用npm安装的React布局模块加载CSS时遇到了这个问题。你必须导入两个.css文件来让这个模块运行,所以我最初导入它们是这样的:
@import "../../../../node_modules/react-grid-layout/css/styles.css";
但发现文件扩展名必须被删除,所以这是有效的:
@import "../../../../node_modules/react-grid-layout/css/styles";
当我从谷歌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">
我也遇到了同样的问题,用同样的。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" />
我也面临着同样的问题。在做了一些研究之后,我发现问题出在文件名上。实际文件的名称是“lightgaly .css”,但在链接时我输入了“lightgaly .css”。
更多信息:
它在我的本地主机上运行良好(操作系统:Windows 8.1 &服务器:Apache)。 但是当我将我的应用程序上传到远程服务器(与我的本地主机不同的操作系统和Web服务器)时,它不起作用,给了我和你一样的错误。
因此,问题是服务器的大小写敏感性(与文件名有关)。