Spring Boot 中静态资源（CSS/JS/图片）无法加载的完整解决方案-html教程-PHP中文网

Spring Boot 中静态资源（CSS/JS/图片）无法加载的完整解决方案

Spring Boot 项目中 CSS、JS 等静态资源突然失效，通常是因为 Spring Security 默认拦截所有请求（包括 /static/**），需显式配置资源放行与路径映射。本文详解原因、修复步骤及最佳实践。

spring boot 项目中 css、js 等静态资源突然失效，通常是因为 spring security 默认拦截所有请求（包括 `/static/**`），需显式配置资源放行与路径映射。本文详解原因、修复步骤及最佳实践。

在 Spring Boot 中，静态资源（如 CSS、JavaScript、图片）默认应放在 src/main/resources/static/ 或 src/main/resources/public/ 目录下，并通过标准路径（如 /css/app.css）直接访问。无需额外配置即可生效——这正是你最初能正常加载样式的原因。但一旦引入 spring-boot-starter-security，Spring Security 便会启用默认安全策略：所有请求（含静态资源）均需认证，导致浏览器 403 Forbidden 错误，表现为样式丢失、脚本不执行、背景图空白等。

? 根本原因分析

✅ 无 Security 时：Spring MVC 自动注册 /static/** → classpath:/static/ 映射，资源直通。
❌ 启用 Security 后：HttpSecurity 默认拒绝未授权访问，即使资源路径合法，也会被拦截。
⚠️ 你当前的 securityFilterChain 配置中虽有 .antMatchers("/static/**", "/background.jpg").permitAll()，但存在两个关键问题：
1. "/static/**" 仅覆盖原始路径，而你在 HTML 中引用的是 /styles/css/host_page.css —— 这属于自定义资源路径，未被放行；
2. antMatchers(...).permitAll() 属于 授权规则（Authorization），仍会经过过滤器链；更高效的方式是使用 WebSecurityCustomizer 完全忽略（ignoring） 静态资源路径，跳过整个安全检查流程。

✅ 正确修复方案（推荐双管齐下）

1. 配置资源路径映射（`MvcConfig`）

确保自定义 URL 路径（如 /styles/css/**）正确指向 classpath 下的物理位置：

@Configuration
@EnableWebMvc
public class MvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 将 /styles/css/** 映射到 classpath:/static/css/
        registry.addResourceHandler("/styles/css/**")
                .addResourceLocations("classpath:/static/css/")
                .setCachePeriod(3600); // 可选：设置缓存时间（秒）

        // 同理映射 JS 和图片
        registry.addResourceHandler("/js/**")
                .addResourceLocations("classpath:/static/js/")
                .setCachePeriod(3600);

        registry.addResourceHandler("/images/**")
                .addResourceLocations("classpath:/static/images/")
                .setCachePeriod(3600);
    }
}

? 提示：@EnableWebMvc 会禁用 Spring Boot 的自动 MVC 配置，仅在需深度定制时使用。若无特殊需求，建议移除该注解，改用 application.properties 简化配置（见文末补充）。

2. 安全配置：彻底忽略静态资源路径（`WebSecurityConfig`）

使用 WebSecurityCustomizer Bean 替代已废弃的 configure(WebSecurity) 方法（兼容 Spring Security 5.7+ 和 6.x）：

JSON Toolkit

JSON文件多功能工具。支持格式化、验证、压缩、键排序及点记法路径查询。零依赖。

下载

@Bean
public WebSecurityCustomizer webSecurityCustomizer() {
    return (web) -> web.ignoring()
            .requestMatchers(
                "/static/**",     // 原始路径
                "/styles/**",     // 自定义 CSS 路径
                "/js/**",         // 自定义 JS 路径
                "/images/**",     // 自定义图片路径
                "/favicon.ico",
                "/**/*.png",
                "/**/*.jpg",
                "/**/*.gif",
                "/**/*.svg"
            );
}

✅ web.ignoring() 表示这些请求完全绕过 Spring Security 过滤器链，零性能损耗，且优先级高于 authorizeRequests。