Spring Boot本地环境下仅打开浏览器开发者工具时字体文件返回404或302的问题排查

我来帮你一步步排查这个问题哈，先梳理下你的项目配置情况：

• Spring Boot版本：2.4.1
• Java版本：1.8
• 引入核心依赖：spring-boot-starter-security 和 spring-boot-starter-web
• 应用上下文路径：在application.yml中设置为/admin
• 字体文件存放位置：src/main/resources/static/FKGroteskNeue-1.1.1/woff-static/ 以及 woff2-static/
• CSS中使用绝对路径引用字体文件

接下来咱们逐个分析可能的原因和对应的排查解决方向：

1. 绝对路径与上下文路径不匹配 #

你的应用上下文是/admin，如果CSS里写的是类似/FKGroteskNeue-1.1.1/woff-static/xxx.woff这种绝对路径，浏览器会直接请求根域名下的资源，而非/admin前缀的路径，这就会导致404。平时浏览器可能缓存了字体文件所以没暴露问题，但打开开发者工具（通常会强制刷新或禁用缓存）时，这个路径错误就直接显现了。

• 解决建议：
  • 把CSS里的绝对路径加上上下文前缀，改成/admin/FKGroteskNeue-1.1.1/woff-static/xxx.woff
  • 或者根据CSS文件的位置调整为相对路径，比如../FKGroteskNeue-1.1.1/woff-static/xxx.woff（具体层级看CSS所在目录）

2. Spring Security的拦截规则拦截了静态资源 #

因为你引入了spring-boot-starter-security，默认配置会拦截所有请求，包括静态资源。平时浏览器缓存了字体文件所以正常显示，开启开发者工具后强制请求资源时，就会被Security拦截，返回302跳转到登录页或者直接404/403。

• 排查解决步骤：
  • 检查你的Security配置类，添加放行字体文件路径的规则，示例代码如下：

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
            // 放行字体文件所在的路径，注意要带上上下文前缀
            .antMatchers("/admin/FKGroteskNeue-1.1.1/**").permitAll()
            // 也可以统一放行所有static下的静态资源
            .antMatchers("/admin/**").permitAll()
            .anyRequest().authenticated();
    }
    

3. 静态资源映射规则被自定义配置覆盖 #

Spring Boot默认会把src/main/resources/static下的资源映射到/（结合上下文就是/admin/），但如果自定义了WebMvcConfigurer，可能不小心覆盖了默认的资源映射规则，导致字体文件无法被正确访问。

• 排查建议：
  • 确认自定义的Web配置类中没有破坏默认的静态资源映射，必要时手动添加映射规则：

    @Configuration
    public class WebConfig implements WebMvcConfigurer {
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry.addResourceHandler("/admin/**")
                    .addResourceLocations("classpath:/static/");
        }
    }
    

  • 手动在浏览器地址栏输入字体文件的完整URL（比如http://localhost:8080/admin/FKGroteskNeue-1.1.1/woff-static/xxx.woff），看看能否正常下载，以此快速判断是路径问题还是权限拦截问题。

4. 浏览器缓存的“障眼法” #

平时浏览器会自动缓存已经请求过的字体资源，即使路径或权限有问题，也能从缓存中读取显示。但打开开发者工具时，大多数情况下会默认开启“禁用缓存”选项（在Network面板），这时候浏览器会重新发起请求，原本隐藏的问题就直接暴露了。

• 验证方法：打开开发者工具的Network面板，勾选“Disable cache”，刷新页面后查看字体文件的请求URL和状态码，就能直观定位是路径错误还是被拦截。

内容来源于stack exchange