Spring Boot 引入静态资源返回400/404及解决思路

问题现象与原因分析

Spring Boot 默认将 classpath:/static（即 resources/static）作为静态资源的根目录。当 HTML 文件位于 templates 目录下，而 JS/CSS 文件位于 static 下的子文件夹（如 static/js/test.js）时，如果引用方式不当，服务器可能无法正确定位文件，进而抛出 400 Bad Request 或 404 Not Found 错误。

核心原因包括：
1. 引用路径未正确指向静态资源根目录。
2. Spring Boot 默认的静态资源映射模式不包含深层子目录（取决于具体版本和配置）。
3. 混合使用绝对路径与相对路径导致解析失败。

解决方案一：优化目录结构与引用路径

最基础且符合 Spring Boot 惯例的做法是将静态资源直接放在 static 目录下，或在 templates 中正确引用其相对于 static 根的路径。

1. 确认标准目录结构：

src
 └─main
   ├─java
   └─resources
      ├─static
      │  ├─css
      │  ├─img
      │  └─js
      │     └─test.js
      └─templates

2. 正确的引用方式：
在 Thymeleaf 模板中，引用 static/js/test.js 应使用以下代码：

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

或者在普通 HTML 中使用相对路径（从根目录开始）：

<script src="/js/test.js"></script>

注意：不需要手动添加 static 前缀，因为 / 代表 Web 应用根路径，而静态资源已自动映射至此处。

解决方案二：自定义静态资源路径模式

如果希望保持现有的复杂目录结构，或者发现某些特定子文件夹下的资源无法通过上述方式访问，可以通过配置文件扩展静态资源的扫描范围。

1. 修改 application.properties：

spring.mvc.static-path-pattern=/static/**

2. 修改 application.yml：

spring:
    mvc:
        static-path-pattern: /static/**

此配置会将 /static/** 映射到 classpath:/static 及其所有子目录。配置后，需要在 HTML 中引用时使用如下格式：

<link rel="stylesheet" href="/static/css/me.css">

虽然此方法有效，但它改变了 URL 的结构，可能导致前端资源引用逻辑变得冗余或不直观，因此通常建议优先使用方案三。

解决方案三：使用 Thymeleaf 专属语法（推荐）

对于使用 Thymeleaf 的项目，推荐使用其内置的表达式语法 @{...}。该语法会自动处理上下文路径和资源解析，无需关心底层的静态资源扫描细节，是解决此类问题最优雅的方式。

示例：

<!-- CSS 引用 -->
<link rel="stylesheet" th:href="@{/css/me.css}">

<!-- JS 引用 -->
<script th:src="@{/js/test.js}"></script>

即使资源嵌套在多级子文件夹中（如 /css/theme/style.css），只需在 @{}内写相对于 static 目录的路径即可，系统会自动拼接前缀并正确处理。这是维持项目结构清晰且避免 400/404 错误的最佳实践。

验证与排查

完成上述配置或代码调整后，请按以下步骤验证：

1. 启动 Spring Boot 应用，清除浏览器缓存。
2. 打开开发者工具（F12），查看 Network 面板。
3. 请求 HTML 页面，观察对应的 JS/CSS 文件请求状态码是否变为 200 OK。
4. 若仍为 400/404，检查文件名拼写、大小写（Linux服务器上敏感）以及路径中的斜杠是否缺失。

以上就是Spring Boot解决静态资源调用无效（400/404）的详细内容，更多关于Spring Boot静态资源配置的资料请关注本站其它相关文章！