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.

Answer 2

Besides @Lukasz's answer, sometimes, as part of the response headers, you might seem to be returning Content-Type as application/json of the HttpServletResponse object for all request in your spring security configuration.

You need to check in your code and find out where you are setting Content-Type in your spring security configuration.

For example, I was setting mine in an overridding method doFilterInternal of the class OncePerRequestFilter.

public class JwtAuthenticationFilter extends OncePerRequestFilter {
    @Override
    protected void doFilterInternal(HttpServletRequest req, HttpServletResponse res, FilterChain chain) throws IOException, ServletException {
        res.setStatus(HttpStatus.OK.value());
        //The below commented line seem to apply for all URIs.        
        //res.setContentType("application/json");
    }
}

CAUTION: You know your code better than anyone else so just know what you are doing.