SSM 整合 HTML:解决 CSS/JS 静态资源被过滤问题(最常见原因 + 完整解决方案)
在 SSM(Spring + SpringMVC + MyBatis)项目中,前端静态资源(css、js、images、fonts 等)经常出现404或被拦截的情况,主要原因几乎都是SpringMVC 的 DispatcherServlet 把静态资源请求也拦截了。
下面按最常见场景 → 问题原因 → 解决方案的顺序,给你最实用、最完整的处理方式(2025-2026 主流做法)。
问题现象(你很可能遇到的几种情况)
页面引入的 css/js 路径正确,但浏览器显示 404
<linkrel="stylesheet"href="/static/css/style.css"><scriptsrc="/static/js/jquery.min.js"></script>控制台报错:
Failed to load resource: the server responded with a status of 404使用
${pageContext.request.contextPath}后仍然 404部分路径能访问(如
/index.html),但/static/**下的全部 404
核心原因
SpringMVC 的前端控制器<url-pattern>/</url-pattern>会拦截所有请求,包括静态资源请求。
而 SpringMVC 默认不处理静态资源,导致这些请求被当作普通请求处理,找不到 Controller 就返回 404。
解决方案(按推荐优先级排序)
方案1:使用<mvc:resources>标签(最常用、最推荐)
在spring-mvc.xml(或 Java Config)中添加静态资源映射。
XML 配置方式(SpringMVC 传统项目)
<!-- spring-mvc.xml --><!-- 静态资源映射 --><mvc:resourcesmapping="/static/**"location="/static/"cache-period="31536000"/><!-- 或者更清晰的写法:分开映射 --><mvc:resourcesmapping="/css/**"location="/static/css/"/><mvc:resourcesmapping="/js/**"location="/static/js/"/><mvc:resourcesmapping="/images/**"location="/static/images/"/><mvc:resourcesmapping="/fonts/**"location="/static/fonts/"/><!-- 重要:不要忘记这一行 --><mvc:annotation-driven/>说明:
mapping:浏览器访问的路径前缀location:项目中实际存放的目录(相对于 webapp 或 resources/static)- 推荐统一放在
/static/下,路径清晰
HTML 中引用方式(推荐相对路径或 contextPath)
<!-- 方式1:推荐 --><linkrel="stylesheet"href="${pageContext.request.contextPath}/static/css/style.css"><!-- 方式2:项目根路径(开发阶段常用) --><linkrel="stylesheet"href="/static/css/style.css">方案2:使用 Java 配置(SpringMVC 纯注解项目)
@Configuration@EnableWebMvc@ComponentScan("com.yourcompany.controller")publicclassWebMvcConfigimplementsWebMvcConfigurer{@OverridepublicvoidaddResourceHandlers(ResourceHandlerRegistryregistry){registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/").setCachePeriod(31536000);// 一年缓存// 也可以分开写,更清晰registry.addResourceHandler("/css/**").addResourceLocations("classpath:/static/css/");registry.addResourceHandler("/js/**").addResourceLocations("classpath:/static/js/");}}注意:如果你的静态资源放在src/main/webapp/static/下,则写:
.addResourceLocations("/static/")方案3:使用 Spring Boot(如果你的项目是 Spring Boot)
Spring Boot 默认已经开启了静态资源映射,几乎不需要额外配置。
默认规则(Boot 2.x / 3.x 都适用):
/static/、/public/、/resources/、/META-INF/resources/目录下的文件- 访问路径:
/css/style.css→ 自动映射到以上目录
项目结构示例(Spring Boot 推荐):
src/main/resources/ └─ static/ ├─ css/ ├─ js/ ├─ images/ └─ fonts/HTML 引用:
<linkrel="stylesheet"href="/css/style.css"><scriptsrc="/js/app.js"></script>如果 Boot 里还是 404,检查是否:
- 关闭了 WebMvc 自动配置(@EnableWebMvc 会禁用默认静态资源)
- 路径写错了(Boot 不需要加 /static/ 前缀)
方案4:临时应急(不推荐长期使用)
在 web.xml 中把 DispatcherServlet 的 url-pattern 改成*.do或/action/*,让它不拦截静态资源。
<servlet-mapping><servlet-name>dispatcher</servlet-name><url-pattern>*.do</url-pattern></servlet-mapping>缺点:路径风格不统一,项目后期维护麻烦。
快速排查 Checklist(遇到 404 就按顺序查)
- 确认静态资源真的在正确目录下(/static/css/style.css 是否存在)
- 浏览器 F12 → Network 看请求路径是否正确
- 确认 spring-mvc.xml 中有
<mvc:resources ... />或 Java Config - 确认有
<mvc:annotation-driven />(或@EnableWebMvc) - 检查是否用了
@EnableWebMvc(会导致 Boot 默认静态资源失效) - 确认项目部署后,tomcat/web 容器能访问到静态文件(可直接输入 http://localhost:8080/static/css/style.css 测试)
- 最后:重启服务器、清空浏览器缓存
推荐的项目目录结构(SSM 经典)
webapp/ ├─ WEB-INF/ │ ├─ web.xml │ ├─ spring-mvc.xml │ └─ applicationContext.xml ├─ static/ │ ├─ css/ │ ├─ js/ │ ├─ images/ │ └─ fonts/ ├─ WEB-INF/views/ │ └─ index.jsp └─ index.jsp总结:最简有效配置口诀
SSM 传统项目:
在 spring-mvc.xml 里加一行
<mvc:resourcesmapping="/static/**"location="/static/"/>Spring Boot 项目:
把静态资源放在src/main/resources/static/下,直接用/css/xx.css访问
HTML 中引用:
始终推荐用${pageContext.request.contextPath}/static/css/xx.css
这样做,99% 的 SSM 项目静态资源 404 问题都能解决。
如果你的项目仍然不行,请告诉我:
- 你用的是纯 SSM 还是 Spring Boot?
- 静态资源具体放在哪个目录?
- 浏览器请求的完整 URL 是多少?
- spring-mvc.xml 里有没有
<mvc:resources>?
把这些信息贴出来,我可以帮你秒定位问题。