问题描述
我有这个问题。 Chrome 会继续返回此错误
Resource interpreted as stylesheet but transferred with MIME type text/html
受此错误影响的文件只是 Style，选择和 jquery-gentleselect(在索引中导入的其他 CSS 文件以同样的方式工作，没有错误) 。我已经检查了我的 MIME 类型，文本/CSS 已经在 CSS 上。
老实说，我想从理解这个问题开始 (一个似乎我不能单独做的事情) 。
最佳解决方法
i’d like to start by understanding the problem
浏览器向服务器发出 HTTP 请求。服务器然后进行 HTTP 响应。
请求和响应都包含一些标题和一个 (有时是可选的) 主体，其中包含一些内容。
如果有一个主体，那么其中一个标题是 Content-Type，它描述了主体是什么 (它是一个 HTML 文档？一个图像？表单提交的内容等) 。
当您要求您的样式表时，您的服务器告诉浏览器它是 HTML 文档 (Content-Type: text/html) 而不是样式表 (Content-Type: text/css) 。
I’ve already checked my myme.type and text/css is already on css.
然后，关于您的服务器的其他内容使得该样式表带有错误的内容类型。
使用浏览器开发人员工具的 “网络” 选项卡来检查请求和响应。
次佳解决方法
使用角度？
这是一个非常重要的注意事项。
基本标签不仅需要在头部，而且位于正确的位置。
我的基本标签在头部错误的地方，它应该在任何具有 url 请求的标签之前。基本上把它作为标题下面的第二个标签解决了它。
<base href="/">
我写了一篇小贴子 here
第三种解决方法
我也面临同样的问题。在做了一些 R&D 后，我发现问题是文件名。实际文件的名称是”lightgallery.css”，但在链接时我键入了”lightGallery.css” 。
更多信息：
它在我的本地主机 (操作系统：Windows 8.1 和服务器：Apache) 上运行良好。但是，当我将应用程序上传到远程服务器 (不同于我的本地主机的不同的操作系统和 Web 服务器) 时，它不起作用，给我同样的错误。
所以，问题是服务器的区分大小写 (相对于文件名) 。
第四种方法
尝试这个<link rel="stylesheet" type="text/css" href="../##/yourcss.css">
其中 ##是您的文件夹，其中是.CSS 文件
不要忘记：..(双点) 。
第五种方法
根据其他答案，似乎这个消息有很多原因，我想我只是分享我的个人解决方案，以防将来有任何人有我的确切问题。
我们的网站从 AWS Cloudfront 发行版加载了 CSS 文件，它使用 S3 bucket 作为起始点。这个特定的 S3 存储桶被保持同步到运行 Jenkins 的 Linux 服务器上。 sync 命令通过 s3cmd 根据操作系统所述 (可能基于文件扩展名) 自动设置 S3 对象的 Content-Type 。由于某些原因，在我们的服务器中，除了.css 文件之外，所有类型都正确设置，它给出了类型 text/plain 。在 S3 中，当您检查文件属性中的元数据时，可以将类型设置为任何所需。将其设置为 text/css 允许我们的网站将文件正确解释为 CSS 并正确加载。
第六种方法
使用角度
在我的情况下使用 ng-href 而不是 href 为我解决了。
注意 ：
我和 back-end 一起工作
第七种方法
@Rob Sedgwick 的答案给了我一个指针，但是，在我的情况下，我的应用程序是一个弹簧启动应用程序。所以我只是在我的安全配置中添加了相关文件路径的排除…
注意 – 此解决方案是 SpringBoot-based … 您可能需要做的可能会因您使用的编程语言和/或您正在使用的框架而有所不同
不过要注意的是：
Essentially the problem can be caused when every request, including those for static content are being authenticated.
所以让我们说一些导致错误的静态内容的路径如下：
一个名为”plugins” 的路径
http://localhost:8080/plugins/styles/css/file-1.css
还有一个叫做”pages” 的路径
http://localhost:8080/pages/styles/css/style-1.css
然后我在弹簧启动安全配置中添加如下的排除：
@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/**"会使错误消失。
干杯!
参考文献
注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。