拒绝应用样式，因为它的 MIME 类型（'application/json'）不受支持答案

【问题标题】：Refused to apply style because its MIME type ('application/json') is not a supported拒绝应用样式，因为它的 MIME 类型（'application/json'）不受支持
【发布时间】：2018-08-22 03:18:36
【问题描述】：

我想使用 fullcalendar 库，使用 gulp 和 yarn 这是生成的链接标签：

但我在控制台中收到此错误：

拒绝应用样式来自 'http://localhost/bower_components/fullcalendar/dist/fullcalendar.css' 因为它的 MIME 类型（'application/json'）不受支持样式表 MIME 类型，并启用严格的 MIME 检查。

为什么我会得到这个，我该如何解决？

【问题讨论】：

可能你的服务器被错误配置为以application/json而不是text/css来提供带有.css扩展名的文件。
你使用的是什么网络服务器？
@MustacheMoses 我正在使用带有 Spring Boot 的 tomcat
您找到解决此问题的方法了吗？

标签： css spring spring-security

【解决方案1】：

您的应用正在以某种方式为 fullcalendar.css 提供错误 MIME 类型（'application/json'）。所以，我的建议是相信错误消息来挖掘问题。

在我的例子中，我第一次尝试使用 spring-boot 的 Thymeleaf 和 WebJars 并且盲目地按照一些教程添加了这个：

@Configuration
public class WebConfigurer extends WebMvcConfigurerAdapter {

  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/webjars/**").addResourceLocations("/webjars/");
  }
}

另外，我的样式在 html 中定义如下：

<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" />

这样一来，“bootstrap.min.css”和其他人就会得到同样的错误：“拒绝应用样式，因为它的 MIME 类型 ('application/json') 不受支持” .

我仍然没有分解这种行为的原因，但是当我意识到 spring-boot 具有 WebJars 的自动配置时，我删除了该注册并且一切都开始运行良好。

注意：有一些类似的曲目带有“MIME type ('text/html')”，原因通常是安全过滤器不允许 css 文件和重定向到 html 登录页面。因此，请记住这一点，并检查您是否对此请求进行了某种过滤/重定向。

【讨论】：

【解决方案2】：

直接把网址放到浏览器里看看能不能访问到。

对于您的情况，请在浏览器中提供此网址 http://localhost/bower_components/fullcalendar/dist/fullcalendar.css

如果您无法访问它，那么您的代码中有错误的 url。

就我而言，我在一个名为 css 的目录中保存了 css 文件，但在我编写 /plugins/css 的代码中却遇到了同样的错误。

另外，别忘了输入 type="text/css"

所以，我的代码示例如下：

<head>
    <link rel="stylesheet" type="text/css" th:href="@{/css/app.css}">
</head>

【讨论】：

【解决方案3】：

如果您使用的是 Spring Boot，您甚至不必覆盖 addResourceHandlers()，只需确保使用 th:href 并将其指向正确的目录即可。

【讨论】：

【解决方案4】：

就我而言，我发现我的 css 文件名有错字。因此我试图导入一个不存在的文件。

【讨论】：