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

4
votes

I want to use the fullcalendar library, using gulp and yarn this is the generated link tag:

But I'm getting this error in the console :

Refused to apply style from 'http://localhost/bower_components/fullcalendar/dist/fullcalendar.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Why I'm getting this and how can I solve it?

4
cssspringspring-security
Probably your server is misconfigured to serve files with a .css extension as application/json instead of text/css. – Alohci
What web server are you using? – mustachioed
@MustacheMoses I'm using tomcat with spring boot – Renaud is Not Bill Gates
Did you find the solution to this issue? – Guangchun

4 Answers

4
votes

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.

3
votes

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.

1
votes

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.

1
votes

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>