JSP无法加载CSS与JS文件 如何适配不同部署路径正常运行

问题根因 #

你当前使用的/js/jquery.min.js、/css/bootstrap.min.css属于根路径绝对引用，浏览器会直接将路径拼接在域名后，不会自动携带应用的上下文路径（也就是你部署到服务器后地址里的/myapp段），所以本地根路径为/时可正常访问，部署到带自定义上下文的环境就会报404。

可行解决方案 #

方案1：JSP内置对象拼接上下文路径（最通用，无副作用）

1. 首先在JSP页面顶部添加上下文路径声明：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String contextPath = request.getContextPath();
    pageContext.setAttribute("ctx", contextPath);
%>

2. 修改资源引用代码，统一加上${ctx}前缀：

<script src="${ctx}/js/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/css/bootstrap.min.css">

方案2：base标签统一设置基础路径

在head标签的最顶部添加base声明，后续所有相对路径都会自动基于这个基础路径拼接：

<head>
<base href="<%=request.getContextPath()%>/">
<!-- 后续资源直接写相对路径即可 -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>

注意：该方案会影响页面内所有相对路径逻辑，包括a标签跳转、form表单提交地址，使用前需确认业务逻辑无冲突。

之前方案失效的排查方向 #

• 检查上下文路径变量是否正确注入，有没有拼写错误
• 检查路径拼接是否多写/漏写斜杠，比如${ctx}js/xxx（漏了中间的斜杠）、${ctx}//js/xxx（多了斜杠）都会导致路径错误
• Spring Boot项目可检查application.properties中spring.mvc.static-path-pattern、spring.web.resources.static-locations配置是否正确，是否拦截了静态资源访问

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