无法在 html 页面中加载 Css 文件

Posted 2023-02-27

【中文标题】无法在 html 页面中加载 Css 文件

【英文标题】：Not able to load Css file in html page

【发布时间】：2019-11-11 20:44:08

【问题描述】：

我正在尝试使用 Spring Security 制作登录页面，并在 AntMatcher 列表中添加了 .css 文件以获得许可。但是，尝试加载 CSS 文件时仍然出现以下错误。

例外：

home:6 GET http://localhost:8080/defaultStyle.css net::ERR_ABORTED 404

使用更改后的类进行更新。

WebSecurityConfig 类代码：

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity( jsr250Enabled = true,
                         prePostEnabled = true )
public class WebSecurityConfig extends WebSecurityConfigurerAdapter


@Autowired
CustomUserDetailsService customUserDetailsService;

@Autowired
private JwtAuthenticationEntryPoint unauthorizedHandler;

@Autowired
private JwtAuthenticationFilter jwtAuthenticationFilter;

@Autowired
private CustomAccessDeniedHandler customAccessDeniedHandler;

@Bean
public AuthenticationManager authenticationManagerBean() throws Exception

    return super.authenticationManagerBean();


@Override
public void configure( WebSecurity web ) throws Exception

    web.ignoring()
       .antMatchers( "/*.css" ) // or better ending with ".js,html" or something
       .antMatchers( "/resources/static/**/*" );


@Override
public void configure( HttpSecurity http ) throws Exception


    http.cors().and().csrf().disable().authorizeRequests()

        .antMatchers( "/*", "/admin", "/api/auth/**",
            "/static/**",
            "/css/*.css",
            "/img/**",
            "/favicon.ico",
            "/**/*.png",
            "/**/*.gif",
            "/**/*.svg",
            "/**/*.jpg",
            "/**/*.html",
            "/**/*.css",
            "/**/*.js",
            "/webjars/**" ).permitAll()
        .anyRequest().authenticated()
        .and()
        .formLogin().loginPage( "/home" )
        .loginProcessingUrl( "/login-user" )
        .defaultSuccessUrl( "/dashboard" ).permitAll()
        .and()
        .logout().invalidateHttpSession( true )
        .clearAuthentication( true )
        .logoutRequestMatcher( new AntPathRequestMatcher( "/logout" ) )
        .logoutSuccessUrl( "/login?logout" )
        .permitAll().and()

        .exceptionHandling().accessDeniedHandler( customAccessDeniedHandler ).authenticationEntryPoint( unauthorizedHandler ).and()
        .sessionManagement().sessionCreationPolicy( SessionCreationPolicy.STATELESS );
    http

        .addFilterBefore( jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class );


@Autowired
public void globalUserDetails( AuthenticationManagerBuilder auth ) throws Exception

    auth.userDetailsService( customUserDetailsService )
        .passwordEncoder( passwordEncoder() );


@Bean
public PasswordEncoder passwordEncoder()

    return new BCryptPasswordEncoder();

网络配置类

Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer


@Override
public void addResourceHandlers( ResourceHandlerRegistry registry )

    registry
        .addResourceHandler( "swagger-ui.html" )
        .addResourceLocations( "classpath:/META-INF/resources/" );

    registry
        .addResourceHandler( "/webjars/**" )
        .addResourceLocations( "classpath:/META-INF/resources/webjars/" );
    registry
        .addResourceHandler( "/static/**" )
        .addResourceLocations( "classpath:/static/" );
    registry.addResourceHandler( "/css/**" )
            .addResourceLocations( "/css/" );
    registry.addResourceHandler( "/img/**" )
            .addResourceLocations( "/img/" );
    registry.addResourceHandler( "/js/**" )
            .addResourceLocations( "/js/" );


@Override
public void addCorsMappings( CorsRegistry registry )

    registry.addMapping( "/**" )
            .allowedMethods( "POST", "GET", "PUT", "OPTIONS", "DELETE" )
            .allowedHeaders( "X-Auth-Token", "Content-Type" )
            .exposedHeaders( "custom-header1", "custom-header2" )
            .allowCredentials( false )
            .maxAge( 4800 );


@Override
public void addViewControllers( ViewControllerRegistry registry )

    System.out.println( "Inside MvcConfig addViewControllers() adding View forgot" );
    registry.addViewController( "/admin/home" ).setViewName( "jsp/home" );
    registry.addViewController( "/login" ).setViewName( "/login" );

新错误

编辑

我已使用修改后的网络安全文件更新了问题，并将异常更改为我现在得到的新异常。

【问题讨论】：

在浏览器中打开指向css的URL，看看它是否显示在那里，可能你不会在根目录中找到它，而是在某个上下文根目录下。也许像http://localhost:8080/myapp/css/defaultStyle.css。

我已经检查过了。在我应用 Security It 显示之前，我已将它放在它工作的根文件夹中。此应用程序没有显式映射 /error，因此您将其视为后备。 Mon Jul 01 13:35:13 IST 2019 出现意外错误（类型=未找到，状态=404）。没有可用的消息

试试这个：@Override public void configure(WebSecurity web) throws Exception web.ignoring().antMatchers( "/resources/**" ); //使静态内容可用 - 仅适用于 spring mvc 应用程序

已经这样做了。 web.ignoring() .antMatchers("/*.css") // 或者以 ".js,html" 或其他更好的结尾 .antMatchers("/resources/static/**/*");

如果将该文件放入src/main/resources/static/css会发生什么？

【参考方案1】：

请尝试以下代码

 http.cors().and().csrf().disable().
            authorizeRequests()
            .antMatchers( "/",
                "/static/**",
                "/img/**",
                "/favicon.ico",
                "/**/*.png",
                "/**/*.gif",
                "/**/*.svg",
                "/**/*.jpg",
                "/**/*.html",
                "/**/*.css",
                "/**/*.js",
                "/webjars/**" ).permitAll()
            .antMatchers( "/api/auth/**" ).permitAll()
            .anyRequest().authenticated()
            .and()
            .formLogin().loginPage( "/home" )
            .loginProcessingUrl("/login")
            .defaultSuccessUrl( "/dashboard").permitAll()
            .and()

Ref 1Ref 2

【讨论】：

我试过你的改变。在进行更多更改后，它现在显示不同的错误。我将在问题陈述中添加。

你好@majo 你能用你的代码中的最新更改更新问题