调用转发到JSP的Servlet时，浏览器无法访问/查找CSS，图像和链接等相关资源

毕泽宇

2023-03-14

问题内容：

我将servlet转发到JSP时，我在加载CSS和图像以及创建指向其他页面的链接时遇到了麻烦。具体而言，当我把我的<welcome-file>给index.jsp的CSS被加载并正在显示我的图片。但是，如果我把我的<welcome-file>给HomeServlet其控制推进到index.jsp，CSS中没有被应用，并且不显示我的图片。

我的CSS文件在中web/styles/default.css。
我的图像在web/images/。

我像这样链接到我的CSS：

<link href="styles/default.css" rel="stylesheet" type="text/css" />

我正在显示我的图像，如下所示：

<img src="images/image1.png" alt="Image1" />

这个问题是怎么引起的，我该如何解决？

更新1：我添加了应用程序的结构以及其他可能有用的信息。

替代文字

该header.jsp文件是包含CSS链接标记的文件。该HomeServlet设置为我welcome-file在web.xml：

<welcome-file-list>
    <welcome-file>HomeServlet</welcome-file>
</welcome-file-list>

Servlet声明和映射如下web.xml：

<servlet>
    <servlet-name>HomeServlet</servlet-name>
    <servlet-class>com.brianblog.frontend.HomeServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>HomeServlet</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>

更新2：我终于找到了问题-我的servlet映射不正确。显然，在将Servlet设置为您的Servlet时，<welcome-file>它不能具有的URL模式/，我觉得这很奇怪，因为那不代表网站的根目录吗？

新的映射如下：

<servlet-mapping>
    <servlet-name>HomeServlet</servlet-name>
    <url-pattern>/HomeServlet</url-pattern>
</servlet-mapping>

问题答案：

JSP文件生成的HTML页面中的所有相对URL都相对于当前请求URL（如您在浏览器地址栏中看到的URL），而不是您所期望的相对于服务器端JSP文件的位置。就是必须通过URL单独下载这些资源的Web浏览器，而不是必须以某种方式从磁盘包括这些资源的Web服务器。

除了更改相对URL以使其相对于servlet的URL而不是JSP文件的位置之外，另一种解决此问题的方法是使它们相对于域根（即以开头/）。这样，您无需担心在更改servlet的URL时再次更改相对路径。

<head>
    <link rel="stylesheet" href="/context/css/default.css" />
    <script src="/context/js/default.js"></script>
</head>
<body>
    <img src="/context/img/logo.png" />
    <a href="/context/page.jsp">link</a>
    <form action="/context/servlet"><input type="submit" /></form>
</body>

但是，您可能不希望对上下文路径进行硬编码。很合理您可以通过获取EL中的上下文路径${pageContext.request.contextPath}。

<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/default.css" />
    <script src="${pageContext.request.contextPath}/js/default.js"></script>
</head>
<body>
    <img src="${pageContext.request.contextPath}/img/logo.png" />
    <a href="${pageContext.request.contextPath}/page.jsp">link</a>
    <form action="${pageContext.request.contextPath}/servlet"><input type="submit" /></form>
</body>

（可以很容易地将其缩短并用作${root}其他地方）

或者，如果您不担心XML不可读并且XML语法突出显示，请使用JSTL <c:url>：

<head>
    <link rel="stylesheet" href="<c:url value="/css/default.css" />" />
    <script src="<c:url value="/js/default.js" />"></script>
</head>
<body>
    <img src="<c:url value="/img/logo.png" />" />
    <a href="<c:url value="/page.jsp" />">link</a>
    <form action="<c:url value="/servlet" />"><input type="submit" /></form>
</body>

无论哪种方式，如果您有很多相对URL，那么这将很麻烦。为此，您可以使用标签。所有相对URL都将立即成为相对URL。它不过开始与方案（http://，https://，等）。没有简单的方法可以在普通EL中获得基本上下文路径，因此在这里我们需要JSTL的帮助。

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="req" value="${pageContext.request}" />
<c:set var="uri" value="${req.requestURI}" />
<c:set var="url">${req.requestURL}</c:set>
...
<head>
    <base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />
    <link rel="stylesheet" href="css/default.css" />
    <script src="js/default.js"></script>
</head>
<body>
    <img src="img/logo.png" />
    <a href="page.jsp">link</a>
    <form action="servlet"><input type="submit" /></form>
</body>

反过来又有一些警告。锚（#identifierURL）也将相对于基本路径！您想使其相对于请求URL（URI）。所以，改变像

<a href="#identifier">jump</a>

至

<a href="${uri}#identifier">jump</a>

每种方式都有其优点和缺点。选择取决于您。至少，您现在应该了解此问题是如何引起的以及如何解决:)

调用转发到JSP的Servlet时，浏览器无法访问/查找CSS，图像和链接等相关资源

相关阅读

相关文章

相关问答

相关工具

相关文档