Refused to apply style because its MIME type ('application/json') is not a supported

In my case, I found out that I had a typo in css file name. Thus I was trying to import an non existing file.

You're app is serving fullcalendar.css with the wrong MIME type ('application/json') some how. So, my advise is to dig the problem trusting in the error message.

In my case, I was trying Thymeleaf and WebJars with spring-boot for the first time and following blindly some tutorial I added this:

@Configuration
public class WebConfigurer extends WebMvcConfigurerAdapter {

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

Also, my styles were defined in html as below:

<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}" />

This way, "bootstrap.min.css" and others were given the very same error: "Refused to apply style because its MIME type ('application/json') is not a supported".

I still haven't broken down the reasons for this behavior, but as soon as I realized that spring-boot has an automatic configuration for WebJars, I removed that registration and everything started to work well.

Note: There are some similar tracks with "MIME type ('text/html')" and the reason is usually security filters not allowing the css files and redirecting to html login page. So, keep this in mind and check whether you have some kind of filter/redirect for this request.

Directly put the URL in the browser and see if you can reach it.

For your case, give this url in the browser http://localhost/bower_components/fullcalendar/dist/fullcalendar.css

If you can't reach it, then you have wrong url in your code.

For my case, I had the css file in a directory named css, but in the code I wrote /plugins/css and was getting the same error.

Also, don't forget to give the type="text/css"

So, my code example below:

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

If you are using Spring Boot you will not even have to override addResourceHandlers(), just make sure to use th:href and point it to the correct directory.

Refused to apply style because its MIME type ('application/json') is not a supported

Related

Recent Posts