Блог

Главная - Вопросы по программированию - Как я использую css-файлы в spring-boot — они, кажется, вообще не загружаются

Как я использую css-файлы в spring-boot — они, кажется, вообще не загружаются

#css #spring-security

#css #spring-безопасность

Вопрос:

После внедрения spring security — css-файлы перестают работать. Я получаю код ответа 200, но когда я пытаюсь заглянуть внутрь style.css, вместо этого я получаю HTML-код. Последние несколько дней я пытаюсь использовать все решения, которые я нашел в Интернете. — безрезультатно.

Я перемещаю свои файлы в resources / static / css/ folder — не работают. я настраиваю HttpSecurity для предоставления разрешения папки — не работает, я пытаюсь установить весь доступ к странице — нет авторизации — все еще не работает,

Строка Html

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

конфигурация безопасности http

     @Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {

        httpSecurity
                .formLogin()
                .defaultSuccessUrl("/index")
                .and()
                .logout()
                .logoutSuccessUrl("/login")
                .and()
                .authorizeRequests().antMatchers("/login", "/css/styles.css", "/css/**").permitAll()
                .anyRequest().authenticated();

Моя структура ресурсов
восстанавливается
— статический
—-css
styles.css
…

Я не получаю никаких ошибок. мой index.html

 <!DOCTYPE html>
<!--suppress ALL -->
<html
        xmlns:th="http://www.thymeleaf.org">

<head>
    <!--<meta charset="utf-8">-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->

    <title>index</title>


    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
          integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
          crossorigin="anonymous">

    <!-- Font Awesome JS -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
            integrity="sha384-tzzSw1/Vo 0N5UhStP3bvwWPq uvzCMfrN1fEFe xBmv1C/AtVX5K0uZtmcHitFZ"
            crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
            integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/styles.css}" media="screen, projection">

</head>
<body>

INDEX

<div class="wrapper">
    <!-- Sidebar -->
    <div id="sidebar">
        <div th:insert="fragments/sidemenu.html"></div>


    </div>
    <div id="content">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">

                <button type="button" id="sidebarCollapse" class="btn btn-info">
                    <i class="fas fa-align-left"></i>
                    <span>Toggle Sidebar</span>
                </button>
                <Welcomne sec:authentication="name"></Welcomne>

            </div>
        </nav>
    </div>

</div>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
        integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
        crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
        integrity="sha384-uefMccjFJAIv6A rW L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
        crossorigin="anonymous"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
        });
    });
</script>


</body>
</html>

Боковое меню загружается, но без форматирования

Я хочу иметь рабочую страницу с форматированием css, фактическая страница, похоже, загружается, но форматирование исчезло. Я понятия не имею, что попробовать дальше.

Комментарии:

1. Попробуйте удалить static при ссылке на ваш css-файл в атрибуте href: th:href=»@{/css/styles.css}».

2. Кроме того, вы не даете разрешения своим css-файлам, если вы сделали это, поделитесь своей соответствующей конфигурацией.

3. Я добавляю css lint в PermitAll, — никакого эффекта

4. Вы также пробовали переопределять configure (WebSecurity)? Мне удалось получить их в похожем проекте, подобном этому: @Override public void configure(WebSecurity web) выдает исключение { web.ignoring() .antMatchers(«/resources/**/**») .antMatchers(«/css/**»); }

5. Нет, не работает @Override public void configure(WebSecurity web) выдает исключение { web.ignoring().antMatchers(«/resources/**/**»).antMatchers(«/css/**»); }