资源被解释为样式表，但是使用 MIME 类型的文本/html 进行传输 (与 web 服务器无关)

问题描述

我有这个问题。 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

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

然后我在弹簧启动安全配置中添加如下的排除：

@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/**"会使错误消失。

干杯!

参考文献

Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

资源被解释为样式表，但是使用 MIME 类型的文本/html 进行传输 (与 web 服务器无关)