Chrome访问Flutter Web与Spring Boot打包部署应用时manifest.json报401错误如何解决

根因说明 #

• 401错误是Spring Boot的权限拦截规则拦截了manifest.json文件的请求：浏览器请求manifest文件的时机早于登录态凭证被携带到请求中，且该路径未被配置为无需登录即可访问的静态资源白名单
• 直接删除index.html中manifest的引用属于规避方案，会导致应用失去PWA相关能力（添加到桌面、自定义启动样式、离线缓存等），不推荐

正确修复方案 #

情况1：项目使用Spring Security做权限控制 #

在Security配置类中新增静态资源放行规则，示例代码如下：

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                // 放行manifest、图标及Flutter静态资源路径
                .antMatchers("/manifest.json", "/icons/**", "/assets/**", "/js/**", "/css/**").permitAll()
                // 保留原有其他权限规则
                .anyRequest().authenticated()
                .and()
                // 剩余原有配置保持不变
                .formLogin()
                // 其他配置...
    }
}

情况2：项目使用自定义拦截器做登录校验 #

在WebMvc配置类的拦截器注册逻辑中，将manifest相关路径加入排除列表：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(自定义登录拦截器实例)
                .addPathPatterns("/**")
                // 排除无需登录即可访问的路径
                .excludePathPatterns("/manifest.json", "/icons/**", "/assets/**", "/js/**", "/css/**", "/login", "/error");
    }
}

额外注意事项 #

你提供的manifest.json中存在配置错误，第二个图标路径少写了.，建议修改为：

{
  "src": "icons/cd-32.png",
  "sizes": "32x32",
  "type": "image/png"
}

避免后续图标加载出现404问题。

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