Spring Boot + JSP 환경에서 정적 리소스(CSS, JS) MIME 타입 오류 해결

[Tae4an]

🔍 문제 상황

Spring Boot + JSP 환경에서 정적 리소스(CSS, JavaScript) 로딩 시 다음과 같은 MIME 타입 오류가 발생:

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

Refused to execute script from '...' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

💡 해결 방법

1. application.yml 설정

정적 리소스 접근을 위한 Spring MVC 설정을 추가합니다:

spring:
  mvc:
    static-path-pattern: /**  # 정적 리소스 접근 패턴
  web:
    resources:
      static-locations: classpath:/static/  # 정적 리소스 기본 경로

2. JSP에서 리소스 참조

JSTL의 c:url 태그를 사용하여 정적 리소스 경로를 지정합니다:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="<c:url value='/css/style.css'/>">

<!-- JavaScript -->
<script src="<c:url value='/js/main.js'/>"></script>

3. 프로젝트 구조

정적 리소스는 다음과 같은 구조로 배치합니다:

src/main/resources/
└── static/
    ├── css/
    │   └── style.css
    └── js/
        └── main.js

📝 설명

• static-path-pattern: /**: 모든 정적 리소스 요청을 처리할 URL 패턴을 지정
• static-locations: classpath:/static/: 정적 리소스가 위치한 실제 경로를 지정
• c:url 태그: 컨텍스트 경로를 자동으로 처리하여 올바른 리소스 경로를 생성

✅ 결과

• 정적 리소스가 올바른 MIME 타입으로 제공됨
• CSS와 JavaScript 파일이 정상적으로 로드됨
• 브라우저의 MIME 타입 검사를 통과

🔖 참고 사항

• Spring Boot의 기본 정적 리소스 위치는 classpath:/static/
• JSP와 함께 사용할 때는 c:url 태그 사용을 권장
• 향후 정적 리소스 캐싱 등 추가 최적화 가능

🏷️ 관련 태그

#SpringBoot #JSP #StaticResources #MIME #WebMVC