Spring Boot应用中CSS正常加载但JS文件无法加载的问题排查

我的index.html文件头部包含以下资源引用：

<head>
...
<link rel="stylesheet"  type="text/css" th:href="@{/css/index.css}"/>
<script th:src="@{/js/app.js}" type="script" async></script>
...
</head>

Thymeleaf渲染后的输出为：

<link rel="stylesheet" type="text/css" href="/css/index.css">
<script src="/js/app.js" type="script" async="">

文件结构符合Spring Boot静态资源规范（static/css/和static/js/目录下分别存放对应文件），直接在浏览器访问/css/index.css和/js/app.js都能正常打开，也配置了资源处理器：

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/css/**", "/js/**")
            .addResourceLocations("classpath:/static/css/", "classpath:/static/js/");
}

但访问/index路径时，CSS样式正常生效，JavaScript文件却未加载，浏览器网络面板中完全看不到app.js的加载请求。

核心修复：修正script标签的type属性 #

你给script标签设置的type="script"是无效的MIME类型，浏览器会直接忽略这个脚本的加载请求。

两种修复方式：

1. 移除type属性（HTML5标准中，script标签默认类型就是text/javascript，可直接省略）：

<script th:src="@{/js/app.js}" async></script>

2. 设置正确的MIME类型：

<script th:src="@{/js/app.js}" type="text/javascript" async></script>

修改后渲染出的HTML会变为：

<script src="/js/app.js" async=""></script>
<!-- 或 -->
<script src="/js/app.js" type="text/javascript" async=""></script>

此时浏览器会正确识别并加载JavaScript文件。

额外排查点（若上述修复无效） #

• 检查浏览器控制台是否有资源拦截报错（比如CSP策略限制、广告拦截插件干扰）
• 确认app.js文件内容是否为空或存在语法错误（不影响加载，但会导致功能失效）
• 清除浏览器缓存后重新测试

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