CSS 和 Images not loading in Spring Boot's index.html
[英]CSS and Images not loading in Spring Boot's index.html
问题描述
My files are organized like this:
我的文件是这样组织的：
index.html renders perfectly when accessed via Intellij's lunch url ( localhost:63342/../static/index.html ) index.html通过 Intellij 的午餐 url 访问时呈现完美（ localhost:63342/../static/index.html ）
But when I run my Spring Boot app and access http://localhost:8080/ , my index.html fails to load the CSS files and images.但是当我运行我的 Spring Boot 应用程序并访问http://localhost:8080/时，我的index.html无法加载 CSS 文件和图像。
I have not touched any other configuration.我没有触及任何其他配置。 All my controllers are @RestController s.我所有的控制器都是@RestController 。 I do have mustache installed as a dependency but am not using it anywhere.我确实安装了mustache作为依赖项，但我没有在任何地方使用它。
index.html : index.html ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Project</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/body.css"/>
<link rel="stylesheet" type="text/css" href="css/header.css"/>
<link rel="stylesheet" type="text/css" href="css/section_one.css"/>
<link rel="stylesheet" type="text/css" href="css/section_two.css"/>
</head>
<body class="body-inner-wrap">
<header>
<div id="header-wrapper">
<div id="title" class="main_title">
<h1>Project</h1>
</div>
<div id="links">
<ul>
<li>
<a href="#Join"><b>Join</b></a>
</li>
<li>
<a href="#Howto"><b>How-To</b></a>
</li>
<li>
<a href="#About"><b>About</b></a>
</li>
</ul>
</div>
</div>
</header>
<div id="content-wrapper">
<div id="intro-box">
<h2>A simple and fast platform to upload audio files and reach out to your listeners via
our no non-nonsense mobile apps.</h2>
<h5>This is work in progress and will be live soon as a closed beta.</h5>
</div>
<div id="login-box">
<div class="login-form">
<form method="post" action="">
<p><input type="text" name="Username" value="" required placeholder="Username"></p>
<p><input type="password" name="password" value="" required placeholder="Password"></p>
<p><input type="submit" name="Login" value="Login"></p>
</form>
</div>
</div>
</div>
<br><br>
<div id="device-mock-bg">
<div class="device-mock">
<img src="images/android-device-mock.svg"
alt="Android app mock up"
height="700"
width="300" />
</div>
</div>
</body>
</html>
Also, checking the browser's console I found these -另外，检查浏览器的控制台我发现了这些 -
The resource from “http://localhost:8080/css/style.css” was blocked due to MIME type (“application/json”) mismatch (X-Content-Type-Options: nosniff)
Cookie “JSESSIONID” will be soon treated as cross-site cookie against “http://localhost:8080/css/style.css” because the scheme does not match.
Any help, please?有什么帮助吗？
2 个解决方案
解决方案1
0 已采纳 2020-08-19 15:35:55
The problem was that Spring Security was blocking all resources.问题是 Spring 安全阻止了所有资源。 Had to configure it to allow /css/* and /images/*必须将其配置为允许/css/*和/images/*
解决方案2
0 2021-07-09 09:58:56
Next to the comment by @krtkush, I had migrated my application from MVC to a SPA using VueJS.在@krtkush 的评论旁边，我已经使用 VueJS 将我的应用程序从 MVC 迁移到 SPA。 I had a custom MvcConfig (extending WebMvcConfigurer) class configured which resulted in problems loading only my CSS files, Javascript was loading just fine.我配置了自定义 MvcConfig（扩展 WebMvcConfigurer）class，导致仅加载我的 CSS 文件时出现问题，Javascript 加载正常。 I had some overrides for: addResourceHandlers, addInterceptors and added a message source for internationalisation.我有一些覆盖：addResourceHandlers、addInterceptors 并添加了国际化的消息源。
After having deleted this class, as I didn't need it anymore, I found that this resolved my CSS loading issue.删除这个 class 后，因为我不再需要它了，我发现这解决了我的 CSS 加载问题。 This unfortunately took me longer than I had hoped for.不幸的是，这花了我比我希望的更长的时间。 Hope this helps others that are in a similar process.希望这可以帮助处于类似过程中的其他人。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.