CSS 和图像未在 Spring Boot 的 index.html 中加载答案

【问题标题】：CSS and Images not loading in Spring Boot's index.htmlCSS 和图像未在 Spring Boot 的 index.html 中加载
【发布时间】：2021-07-09 17:58:56
【问题描述】：

我的文件是这样组织的：

index.html 在通过 Intellij 的午餐 URL (localhost:63342/../static/index.html) 访问时完美呈现

但是当我运行我的 Spring Boot 应用程序并访问 http://localhost:8080/ 时，我的 index.html 无法加载 CSS 文件和图像。

我没有触及任何其他配置。我所有的控制器都是@RestControllers。我确实安装了 mustache 作为依赖项，但我没有在任何地方使用它。

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>

另外，检查浏览器的控制台我发现了这些 -

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.

有什么帮助吗？

【问题讨论】：

你能分享你引用css的index.html吗
完成。也从控制台添加了一些错误。
奇怪的是，index.html 和目录结构相同，它对我有用。从错误消息中，似乎响应标头content-type 在url http://localhost:8080/css/style.css 上设置为application/json 而不是text/css。您是否为配置中的所有 url 设置全局内容类型标头。
Spring 安全性是我的问题。我必须在安全配置中明确允许css/*。
stackoverflow.com/questions/45920722/…

标签： html css spring spring-boot

【解决方案1】：

问题是 Spring Security 阻塞了所有资源。必须将其配置为允许 /css/* 和 /images/*

【讨论】：

【解决方案2】：

在@krtkush 的评论旁边，我已经使用 VueJS 将我的应用程序从 MVC 迁移到了 SPA。我配置了一个自定义 MvcConfig（扩展 WebMvcConfigurer）类，导致仅加载我的 CSS 文件时出现问题，Javascript 加载得很好。我有一些覆盖：addResourceHandlers、addInterceptors 并添加了一个用于国际化的消息源。

删除这个类后，因为我不再需要它，我发现这解决了我的 CSS 加载问题。不幸的是，这比我希望的要长。希望这对处于类似过程中的其他人有所帮助。

【讨论】：