Spring Boot未返回正确MIME类型致CSS加载失败求助

我之前做类似项目时完全碰到过一模一样的问题！你看到的这个错误本质上不是CSS文件本身的问题，而是Spring Security把你的CSS请求拦截了，重定向到了登录页，所以浏览器收到的其实是登录页面的HTML内容，MIME类型自然是text/html，浏览器当然拒绝把它当成样式表加载了。

下面是我当时解决这个问题的几个关键步骤：

1. 配置Spring Security放行静态资源 #

默认情况下Spring Security会拦截所有HTTP请求，包括你的CSS、JS、图片这些静态资源。你需要在Security的配置类里明确告诉它要放行这些资源路径：

如果你用的是Spring Security 5.x及以下版本： #

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
                // 放行所有静态资源路径，根据你的实际目录调整
                .antMatchers("/css/**", "/js/**", "/images/**").permitAll()
                // 其他请求需要认证
                .anyRequest().authenticated()
            .and()
                .formLogin()
                // 指定登录页路径（如果你的登录页是自定义的）
                .loginPage("/login")
                .permitAll();
    }
}

如果是Spring Security 6+版本（推荐的新写法）： #

@Configuration
@EnableWebSecurity
public class SecurityConfig {
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .authorizeHttpRequests(auth -> auth
                .requestMatchers("/css/**", "/js/**", "/images/**").permitAll()
                .anyRequest().authenticated()
            )
            .formLogin(form -> form
                .loginPage("/login")
                .permitAll()
            );
        return http.build();
    }
}

2. 确认静态资源的存放位置 #

Spring Boot默认会从src/main/resources/static/目录加载静态资源，所以你的CSS文件应该放在这个目录的子文件夹里，比如：

src/main/resources/
└── static/
    └── css/
        └── main.css

这样Thymeleaf引用的时候路径才会正确识别。

3. 检查Thymeleaf的CSS链接写法 #

一定要用Thymeleaf的@{}语法来生成绝对路径，避免相对路径导致的请求错误：

<!-- 正确写法 -->
<link rel="stylesheet" th:href="@{/css/main.css}">

<!-- 错误写法（相对路径可能导致请求路径错误，被Security拦截） -->
<link rel="stylesheet" href="css/main.css">

@{}会自动帮你生成基于应用根路径的URL，不管当前页面在什么路径下，都能正确指向CSS文件。

4. 验证请求路径是否正确 #

打开Chrome开发者工具（F12），切换到Network标签，刷新页面后看CSS的请求记录：

• 如果请求的URL是http://localhost:8080/login，那说明请求被Security重定向了，回到第一步检查静态资源的放行配置是否正确。
• 如果请求的URL是正确的http://localhost:8080/css/main.css，但还是返回HTML，那可能是你的静态资源存放位置不对，或者Spring Boot没有正确识别到静态资源（可以重启一下应用试试）。

按照这几步来，基本就能解决这个MIME类型错误的问题了！

内容的提问来源于stack exchange，提问作者Simona Simeonova