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

问题

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?

回答1:

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.

回答2:

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've add 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've still not broken the reasons for that behavior, but as soon as I realized spring-boot have a Autoconfiguration for WebJars I've removed that registry and everything started working just fine.

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.

回答3:

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.

回答4:

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>

来源：https://stackoverflow.com/questions/49263433/refused-to-apply-style-because-its-mime-type-application-json-is-not-a-suppo

标签

css

Spring

spring-security