CODEWITHSUNDEEP
springspring-mvcspring-boot
Faizan Mubasher
Faizan Mubasher

Reputation: 4569

Spring Boot Failed to load resource: the server responded with a status of 404

I am facing this error:

enter image description here

Failed to load resource: the server responded with a status of 404

Here is how I am loading css. Note that I am not using WebMvcConfigurer.

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <title>Material Design Bootstrap</title>
   <!-- Font Awesome -->
   <link rel="stylesheet" th:href="@{https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css}">
   <!-- Bootstrap core CSS -->
   <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
   <!-- Material Design Bootstrap -->
   <link rel="stylesheet" th:href="@{/css/mdb.min.css}">
   <!-- Your custom styles (optional) -->
   <link rel="stylesheet" th:href="@{/css/style.css}">
</head>

And I am loading js files at the end of the page (body).

   <body>

    ......      

    <!-- SCRIPTS -->
    <!-- JQuery -->
    <script type="text/javascript" src="/static/js/jquery-3.1.1.min.js" th:src="@{/js/jquery-3.1.1.min.js}"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="/static/js/popper.min.js" th:src="@{/js/popper.min.js}"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="/static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="/static/js/mdb.min.js" th:src="@{/js/mdb.min.js}"></script>
 </body>

What could be the reason?

EDIT:

Here is my directory structure

enter image description here

Upvotes: 1

Views: 15821

Answers (3)

bugz
bugz

Reputation: 41

this worked for me.

this is how my files are like in the static folder:

this is how i include the files from the static folder into my html pages:

i get rid of the static folder in the path since the server i guess knows to look for static content in the static folder. so the path for my all.min.css will be.

http://127.0.0.1:8080/js/demo/all.min.css

it will search for in the static folder.

if you add static i.e

{link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"}

the server will look for

http://127.0.0.1:8080/static/static/js/demo/all.min.css

and it won't get that path

remember to allow the routes in antmatchers if you're using spring security. see attached image

allow the routes to the folders in static folder if using spring security:

Upvotes: 1

Avijit Barua
Avijit Barua

Reputation: 3086

Seems you are doing mistake while you are loading jquery. Your jquery is jquery-3.3.1.min.js but you are loading jquery-3.1.1.min.js 

 <script type="text/javascript" src="/static/js/jquery-3.1.1.min.js" th:src="@{/js/jquery-3.1.1.min.js}"></script>

So check jquery version.

Upvotes: 2

ISlimani
ISlimani

Reputation: 1673

directory structure

Load css

<link href="../static/assets/css/materialize.min.css" type="text/css"
    rel="stylesheet" th:href="@{/assets/css/materialize.min.css}"
    media="screen,projection">

Load js

<script type="text/javascript" src="../static/assets/js/materialize.min.js"
    th:src="@{/assets/js/materialize.min.js}"></script>

Upvotes: 0

Related Questions