환경
서버 : 톰캣 단독
문제
스프링을 사용중인 웹 사이트에서 최초 접속시 CSS가 로딩되지 않는 현상이 있었다. 새로고침하면 이후부터는 제대로 나오긴 하지만 브라우저를 닫고 다시 웹 사이트에 접속하면 여전히 처음에는 CSS가 로딩되지 않았다. 그런데 index.html에서 페이지 리다이렉트로 문제의 페이지에 접근한 경우에는 제대로 나왔다. 즉 주소를 직접 입력해서 접속시 최초 1회는 페이지가 제대로 나오지 않는 것이다.
그래서 브라우저의 콘솔을 열어보니 아래와 같은 로그가 꽤 많이 찍혀있었다.
“http://127.0.0.1:9080/gim/;jsessionid=02B695062249B5363476B2D5293A2AF9js/vendor/modernizr-2.8.3-respond-1.4.2.min.js” 소스의 <script> 로딩을 실패하였습니다.
메시지를 보면 script가 로딩되지 않는다고 하는데 script와 더불어 CSS가 함께 로딩되지 않아서 디자인 없이 HTML만 불러오는 상황이었다.
문제가 되는 부분을 jsp 소스에서 찾았고 그 중 일부만 보면 아래와 같은 형식으로 되어있었다.
<link rel="stylesheet" href="<c:url value='/'/>css/main.css">
<script src="<c:url value='/'/>js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
해결
위의 문제는 <c:url value='/'/>의 결과 값인 /gim의 뒤에 세션아이디가 붙어 "/gim/;jsessionid=19B754062123249B5476B2D5435A2AF3" 처럼 경로가 변하면서 문제가 된 것이었다.
2가지 해결방법을 발견하였는데
첫 번째로 아래처럼 상대 경로로 고쳐서 문제를 해결하였다.
<link rel="stylesheet" href="../css/main.css">
<script src="../js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
이경우 소스보기 시에도 깔끔하게 위와 동일한 소스가 보인다
두 번째로 아래처럼 <c:url>을 고쳐서 문제를 해결하였다.
<link rel="stylesheet" href="<c:url value='/css/main.css'/>">
<script src="<c:url value='/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js'/>"></script>
이 경우 해당 화면에서 소스보기 하면 아래처럼 나타났다.
<link rel="stylesheet" href="/gim/css/main.css;jsessionid=19B754062123249B5476B2D5435A2AF3">
<script src="/gim/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js;jsessionid=19B754062123249B5476B2D5435A2AF3"></script>
<c:url> 사용시 주의하는 것이 좋겠다.