Refused to apply style because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled

Question

I added swagger-ui to my spring-boot service application and I've got some error like that when visiting the /swagger-ui/ link.

Error in browser console please see the image(click this link)

My reference in swagger is from here:

https://www.baeldung.com/swagger-2-documentation-for-spring-rest-api

here my sample coode of the configuration:

@Configuration
public class WebConfiguration implements WebMvcConfigurer {

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new LoggerInterceptor());
    }

    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("swagger-ui.html").addResourceLocations("classpath:/META-INF/resources/");
        registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
    }

}

I tried excluding this part:

    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("swagger-ui.html").addResourceLocations("classpath:/META-INF/resources/");
        registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
    }

still no resolve. Hope someone might help. Thank you.

Answer 1

I'm using OpenApi 3 and I was facing with similar error:

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

Spring Security turned out to be a problem because it didn't allow to access swagger-ui.css due to no authorization. Following code solved my problem:

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true, securedEnabled = true)
public class SecurityConfig extends WebSecurityConfigurerAdapter {

// ... ommited security config

    @Override
    public void configure(final WebSecurity webSecurity) {
        webSecurity.ignoring().antMatchers(
                "/v3/api-docs/**",
                "/swagger-ui/**",
                "/swagger-ui.html");
    }
}

Probably you will have to correct above paths according to your swagger-ui URL config. In addition, I would suggest to use this solution only for local/dev profile in order to don't expose API documentation in production environment. Let me know if it solved your issue. In case of futher problems I can provide full source. Cheers.