'SpringBoot Thymeleaf: No mapping for GET /css/style.css
I'm trying to add .css file to my index.html using Thymeleaf. But browser throws some strange errors:
GET http://localhost:8080/css/style.css net::ERR_ABORTED 404
And on server i got:
o.s.web.servlet.PageNotFound : No mapping for GET /css/style.css
Why it's happens? Also, it happens with all static components like .js and .css files. I have not any security. Please, help!
Sources:
WebConfig.java
@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedMethods("*").allowedOrigins("*");
}
}
AdminPanel.java
@ConditionalOnProperty("app.is_debugging")
@Controller
public class AdminPanel {
@RequestMapping(value = { "/", "/index" }, method = RequestMethod.GET)
public String getIndex(Model model) {
return "index";
}
}
index.html
<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Custom messanger</title>
<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
<!-- libs for stomp and sockjs-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.4.0/sockjs.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
<!-- end libs for stomp and sockjs-->
<script type="text/javascript" th:src="@{/js/chat.js}"></script>
</head>
<body>
<div class="container clearfix">
<input type="text" id="name" placeholder="name">
<button onclick="createRoom()">Create room</button>
<input type="text" id="roomId" placeholder="roomId">
<button onclick="connectToTheRoom()">Connect</button>
<button onclick="connectToSocket()">Connect to socket</button>
<input type="text" id="message" placeholder="message">
<button onclick="sendMsg()">Send</button>
</div>
<div id="messagesList">
<a class="messagesConsole">Test msg1</a>
<a class="messagesConsole">Test msg2</a>
</div>
</body>
</html>
My file structure
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

