Spring boot no mapping for CSS - JS

Question

My project structure:

resoureces
  static
    css
    js
  templates
    a.html
    b.html

My application.yml:

resources:
static-locations: classpath:/

And my html code:

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
      <meta charset="UTF-8">
      <meta content="webkit" name="renderer">
      <meta content="width=device-width, initial-scale=1" name="viewport">
      <link rel="shortcut icon" href="static/img/favicon.ico" />
      <script src="static/js/jquery-3.2.1.js"></script>
      <script src="static/js/bootstrap.min.js"></script>
      <script src="static/js/jquery-confirm.min.js"></script>
      <link href="static/css/reset.css" rel="stylesheet">
      <link href="static/css/bootstrap.min.css" rel="stylesheet">
      <link href="static/css/pretty.css" rel="stylesheet">
      <link href="static/css/iconfont.css" rel="stylesheet">
      <link href="static/css/common.css" rel="stylesheet">
      <link href="static/css/jquery-confirm.min.css" rel="stylesheet">
</head>
<body>
      <p>test</p>
</body>

My controller:

 @Controller
public class IndexController {

    @GetMapping("/index")
    public String toIndex(){
        return "index";
    }

    @GetMapping("/index/test")
    public String test(){
        return "index";
    }
}

/index css and js success

but /index/test idea show no mapping for it

What is the correct configuration?

HTML How to link CSS and JS?

Possible duplicate of [Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP](https://stackoverflow.com/questions/3655316/browser-cant-access-find-relative-resources-like-css-images-and-links-when-cal) — Alan Hay, Jul 12 '19 at 09:18
Is the problem only with navigation in Idea or it's not working properly when you run the project? — Alexey Usharovski, Jul 12 '19 at 11:42

score 2 · Accepted Answer · answered Jul 12 '19 at 18:40

The issue is that you're using relative paths, such as static/css/reset.css.

Your browser will handle these by using the current path, and append the relative one.

Assuming that you're running your application on port 8080, when you call http://localhost:8080/index, the resources will be fetched from http://localhost:8080/static/css/reset.css. However, when you're calling /index/test, the relative path would refer to http://localhost:8080/index/static/css/reset.css.

That means that due to you using relative paths, it will fetch the resources from a different location if your path is different.

One possible solution is to use a <base /> tag within the <head> section of your HTML, such as:

<base href="/" />

By setting the <base /> tag, you're telling your browser where to relatively fetch resources from.

More detailed information can be found within this question.

Also, be aware that by default, Spring boot will serve resources within src/main/resources/static on the context path itself, so might have to drop the static/ part from the URLs, such as:

<link href="css/reset.css" rel="stylesheet">

Spring boot no mapping for CSS - JS

1 Answers1

Linked