【问题标题】:Can't load my css when using spring security and thymeleaf使用spring security和thymeleaf时无法加载我的css
【发布时间】:2019-07-17 19:22:25
【问题描述】:

我在使用 spring security 和 thymeleaf 时无法加载我的 css 文件。

每当我使用 rel="stylesheet" 时,都会出现严格的 MIME 启用错误。

我的 css 文件在资源/静态文件夹中

我的 html 文件是资源/模板。

HTML 头:

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Login</title>
<meta http-equiv="content-type" content="text/css; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
      integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"
        integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"
        crossorigin="anonymous"></script>

<link th:href="auth.css" type="text/css" href="../static/auth.css" >
<!--<link  href="../static/auth.css" type="text/css" rel="stylesheet">-->

我的 Spring 安全代码:

 @Configuration
@EnableWebSecurity
public class SpringSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .authorizeRequests()
                .antMatchers("/css/**","/static/**", "/resources/**","/.*.css").permitAll()
                .anyRequest().fullyAuthenticated()
                .and()
                .formLogin()
                .loginPage("/login").permitAll();
    }

}

【问题讨论】:

    标签: css spring spring-boot spring-security thymeleaf


    【解决方案1】:

    也覆盖此方法configure(WebSecurity web) 并修改如下代码

     @Configuration
    @EnableWebSecurity
    public class SpringSecurityConfig extends WebSecurityConfigurerAdapter {
    
        @Override
        protected void configure(HttpSecurity http) throws Exception {
            http
                    .authorizeRequests()
                    .antMatchers("/").permitAll()
                    .anyRequest().authenticated()
                    .and()
                    .formLogin()
                    .loginPage("/login").permitAll();
        }
          @Override
            public void configure(WebSecurity web) throws Exception {
                web
                        .ignoring()
                        .antMatchers("/resources/**", "/static/**", "/css/**", "/js/**", "/images/**","/vendor/**","/fonts/**");
            }
    }
    

    【讨论】:

    • 谢谢@AritiaPaul
    【解决方案2】:

    这个问题在大多数情况下是由链接 css 和 HTML 链接标签引起的。要克服这个问题,您应该改用 thymelaf 命名空间 &lt;link th:href="@{name.css}" type="text/css"&gt;

    【讨论】:

      猜你喜欢
      • 2017-07-13
      • 1970-01-01
      • 2018-08-31
      • 1970-01-01
      • 2018-12-07
      • 2019-02-26
      • 1970-01-01
      • 2018-01-22
      • 2016-08-17
      相关资源
      最近更新 更多