资源被解释为样式表，但使用 MIME 类型 text/html 传输（似乎与 Web 服务器无关）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22631158/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)
提问by Max
I have this problem. Chrome continues to return this error
我有这个问题。Chrome 继续返回此错误
Resource interpreted as stylesheet but transferred with MIME type text/html
资源被解释为样式表但使用 MIME 类型 text/html 传输
The files affected by this error are just the Style, chosen and jquery-gentleselect (other CSS files that are imported in the index in the same way work well and without error). I've already checked my MIME type and text/css is already on CSS.
受此错误影响的文件只是 Style、selected 和 jquery-gentleselect（以相同方式导入索引中的其他 CSS 文件运行良好且没有错误）。我已经检查了我的 MIME 类型并且 text/css 已经在 CSS 上。
Honestly I'd like to start by understanding the problem (a thing that seems I cannot do alone).
老实说，我想从理解问题开始（这似乎是我无法单独完成的）。
采纳答案by Quentin
i'd like to start by understanding the problem
我想先了解这个问题
Browsers make HTTP requests to servers. The server then makes an HTTP response.
浏览器向服务器发出 HTTP 请求。然后服务器做出 HTTP 响应。
Both requests and responses consist of a bunch of headers and a (sometimes optional) body with some content in it.
请求和响应都由一堆标头和一个（有时是可选的）正文组成，其中包含一些内容。
If there is a body, then one of the headers is the Content-Typewhich describes what the body is (is it an HTML document? An image? The contents of a form submission? etc).
如果有正文，则其中一个标题是Content-Type描述正文的内容（它是 HTML 文档？图像？表单提交的内容？等）。
When you ask for your stylesheet, your server is telling the browser that it is an HTML document (Content-Type: text/html) instead of a stylesheet (Content-Type: text/css).
当您请求样式表时，您的服务器告诉浏览器它是一个 HTML 文档 ( Content-Type: text/html) 而不是样式表 ( Content-Type: text/css)。
I've already checked my myme.type and text/css is already on css.
我已经检查了 myme.type 并且 text/css 已经在 css 上。
Then something else about your server is making that stylesheet come with the wrong content type.
然后关于您的服务器的其他事情使该样式表带有错误的内容类型。
Use the Net tab of your browser's developer tools to examine the request and the response.
使用浏览器开发人员工具的 Net 选项卡检查请求和响应。
回答by Sten Muchow
Using Angular?
使用角？
This is a very important caveat to remember.
这是一个非常重要的警告要记住。
The base tag needs to not only be in the head but in the right location.
基础标签不仅需要在头部，还需要在正确的位置。
I had my base tag in the wrong place in the head, it should come before any tags with url requests. Basically placing it as the second tag underneath the title solved it for me.
我的基本标签在头部的错误位置，它应该在任何带有 url 请求的标签之前。基本上将它作为标题下方的第二个标签为我解决了这个问题。
<base href="/">
I wrote a little post on it here
我在这里写了一篇关于它的小帖子
回答by Trilochan
I also had problem with this error, and came upon a solution. This does not explain why the error occurred, but it seems to fix it in some cases.
我也遇到了这个错误的问题，并找到了解决方案。这并不能解释错误发生的原因，但在某些情况下似乎可以修复它。
Include a forward slash /before the path to the css file, like so:
在 css 文件的路径之前包含一个正斜杠 /，如下所示：
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
回答by JEuvin
My issue was simpler than all the answers in this post.
我的问题比这篇文章中的所有答案都简单。
I had to setup IIS to include static content.
我必须设置 IIS 以包含静态内容。
回答by seq
Try this <link rel="stylesheet" type="text/css" href="../##/yourcss.css">
尝试这个 <link rel="stylesheet" type="text/css" href="../##/yourcss.css">
where ##is your folder wherein is your .CSS - file
##你的文件夹在哪里，你的 .CSS - 文件在哪里
Don't forget about the: ..(double dots).
不要忘记：（..双点）。
回答by Felipe Cruz
Setting the Anonymous Authentication Credentials to Application Pool Identitydid the trick for me.
将匿名身份验证凭据设置为应用程序池身份对我来说很有效。
回答by Sandeshwar Sharma
I was also facing the same problem. And after doing some R&D, I found that the problem was with the file name. The name of the actual file was "lightgallery.css"but while linking I has typed "lightGallery.css".
我也面临同样的问题。然后做了一些研发，发现问题出在文件名上。实际文件的名称是"lightgallery.css"但在链接时我输入了"lightGallery.css"。
More Info:
更多信息：
It worked well on my localhost (OS: Windows 8.1 & Server: Apache). But when I uploaded my application to a remote server ( Different OS & Web server than than my localhost) it didn't work, giving me the same error as yours.
它在我的本地主机上运行良好（操作系统：Windows 8.1 和服务器：Apache）。但是当我将我的应用程序上传到远程服务器（与本地主机不同的操作系统和 Web 服务器）时，它不起作用，给了我和你一样的错误。
So, the issue was the case sensitivity (with respect to file names) of the server.
因此，问题在于服务器的区分大小写（关于文件名）。
回答by nicolashahn
Based on the other answers it seems like this message has a lot of causes, I thought I'd just share my individual solution in case anyone has my exact problem in the future.
根据其他答案，这条消息似乎有很多原因，我想我只是分享我的个人解决方案，以防将来有人遇到我的确切问题。
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 synccommand via s3cmdsets 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 .cssfiles, 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/cssallowed our site to correctly interpret the files as CSS and load correctly.
我们的站点从 AWS Cloudfront 分发加载 CSS 文件，该分发使用 S3 存储桶作为源。这个特定的 S3 存储桶与运行 Jenkins 的 Linux 服务器保持同步。该sync命令 vias3cmd根据操作系统所说的（大概是基于文件扩展名）自动设置 S3 对象的内容类型。出于某种原因，在我们的服务器中，除了.css文件之外，所有类型都被正确设置，文件类型为text/plain. 在 S3 中，当您检查文件属性中的元数据时，您可以将类型设置为您想要的任何类型。将其设置为text/css允许我们的站点将文件正确解释为 CSS 并正确加载。
回答by techknowcrat
@Rob Sedgwick's answer gave me a pointer, However, in my case my app was a Spring Boot Application. So I just added exclusions in my Security Config for the paths to the concerned files...
@Rob Sedgwick 的回答给了我一个指针，但是，就我而言，我的应用程序是Spring Boot Application。所以我只是在我的安全配置中为相关文件的路径添加了排除项......
NOTE - This solution is SpringBoot-based... What you may need to do might differ based on what programming language you are using and/or what framework you are utilizing
注意 - 此解决方案是基于 SpringBoot 的......根据您使用的编程语言和/或您使用的框架，您可能需要做的事情可能会有所不同
However the point to note is;
但是要注意的一点是；
Essentially the problem can be caused when every request, including those for static content are being authenticated.
本质上，当每个请求（包括静态内容的请求）都经过身份验证时，可能会导致问题。
So let's say some paths to my static content which were causing the errors are as follows;
因此，让我们说一些导致错误的静态内容的路径如下；
A path called "plugins"
一个叫做“插件”的路径
http://localhost:8080/plugins/styles/css/file-1.css
http://localhost:8080/plugins/styles/css/file-1.css
And a path called "pages"
还有一个叫做“页面”的路径
http://localhost:8080/pages/styles/css/style-1.css
http://localhost:8080/pages/styles/css/style-1.css
Then I just add the exclusions as follows in my Spring Boot Security Config;
然后我只需在我的 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
}
}
Excluding these paths
"/plugins/**"and "/pages/**"from authentication made the errors go away.排除这些路径"/plugins/**"和"/pages/**"身份验证使错误消失。Cheers!
干杯!
回答by Ryabchenko Alexander
In case you serve static css with nginx you should add
如果您使用 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;
}
to nginx conf
到 nginx 配置文件
