정적 리소스 관련 오류 Refused to apply style from ' ' is not a supported stylesheet MIME type, and strict MIME checking is enabled.

템플릿의 css와 js 적용중 역시 우려했던 에러가 났다.. 다른 프로젝트 할때도 템플릿을 적용할 때 한번은 꼭 애를 먹였던 에러라 걱정됐는데 또 나고 말았다... 흑흑

 Refused to apply style from '' is not a supported stylesheet MIME type, and strict MIME checking is enabled.

 

에러 분서결과

1. css나 js의 경로를 잘못 입력했을 경우

spring:
  web:
    resources:
      static-locations: classpath:/static/
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html

application.yml 파일 코드 중 일부

 

확인 결과 잘못된 점 없음

그럼 다음

 

2. html 에서 파일경로를 잘못입력한 경우

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400&display=swap" >
    <link rel="stylesheet" href="css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}">
    <link rel="stylesheet" href="css/slick.css" th:href="@{css/slick.css}" />
    <link rel="stylesheet" href="css/templatemo-style.css" th:href="@{css/templatemo-style.css}" >

혹시 몰라서 href / th : href 경로 전부 입력해주었지면 여전히 오류

 

이제 여기서부턴 답이 없었다.. yml 경로가 잘못된건가? 하며 정적 리소스의 위치에 대한 공부를 진행하였다.

 

이건 내가 이것 저것 찾아보다가 알게된 내용인데 스프링 부트의 버전에 따라서 yml 등 설정을 할 때 다른 부분이 있었다

내가 사용하는 스프링 부트 버전은 3.3.3 인데 스프링 2.4.x 이상에서부터 사용하는 yml 구조가 있었다.

스프링 2.3.x 이하 : web.resources.static-locations 구조

스프링 2.4.x 이하 : spring.resources.static-locations 구조

스프링 2.5.x 이상 : spring.web.resources.static-locations 구조

 

이렇게 약간의 차이들이 있다는 것을 알게됐다

 

어쨌든 다른길은 이쯤까지만 하고 다시 문제 해결을 위한 방법을 찾았다

 

3. F12 키를 사용해 계속해서 개발자 모드로 들어가서 오류로그를 확인했다 그 결과

Refused to apply style from 'http://localhost:8080/login/form' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

 

분명 나는 '/' 링크글 입력했는데 쟤가 왜나오지..? 하면서 더 구글리을 해봤다

=> 검색해보니 Spring Security 도 정적 리소스를 관리한다고 한다 때문에 다른 설정이 또 필요했던 것이다 (Spring Security 진짜 해주는게 많구나..! 란걸 느꼈다.)

 

 

때문에 Security Config 에 빈하나를 추가

  @Bean
    public WebSecurityCustomizer webSecurityCustomizer() { //정적 자원 관리 spring security 설정
        return (web) -> web.ignoring()
                .requestMatchers(PathRequest.toStaticResources().atCommonLocations());
    }

출처 : https://velog.io/@yevini118/Spring-Security-%EC%A0%95%EC%A0%81-%EC%9E%90%EC%9B%90-ignore%ED%95%98%EA%B8%B0

[Spring Security] 정적 자원 ignore하기

 

이러니 css와 js 파일들을 잘 불러온다..!!!

 

결론

Spring Security 가 맡는 부분이 정말 많은 것 같다 좋은 기술들을 사용만 하기 보다는 꼼꼼히 공부해서 잘 파악하고 사용하는게 제일 좋은 것 같다