当调用转发到JSP的Servlet时，浏览器无法访问/查找相关资源，如CSS，图像和链接 [英] Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP

问题描述

当我将servlet转发到JSP时，我无法加载CSS和图片，并创建指向其他页面的链接。具体来说，当我将< welcome-file> 设置为 index.jsp 时，图像正在显示。但是，如果我将< welcome-file> 设置为 HomeServlet index.jsp ，则不会应用CSS，也不会显示我的图像。

我的CSS文件位于 web / styles / default.css 。

我的图片在 web / images / 。

我链接到我的CSS像这样：

 < link href =styles / default.css =stylesheettype =text / css /> 
  

我如下显示我的图片：

 < img src =images / image1.pngalt =Image1/> 
  

如何解决这个问题，我该如何解决？

---

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

header.jsp 文件是包含CSS的链接标记的文件。 HomeServlet 在 web.xml welcome-file c>：

 < 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映射不正确。显然，当将< welcome-file> 时，它不能具有 /  
 
 
 
新的映射如下：
 < servlet-mapping> 
< servlet-name> HomeServlet< / servlet-name> 
< url-pattern> / HomeServlet< / url-pattern> 
< / servlet-mapping> 
  
 
 
解决方案
 JSP生成的HTML页面中的所有相对URL文件相对于当前请求URL（您在浏览器地址栏中看到的URL）和不到服务器端的JSP文件的位置。这就是webbrowser谁必须通过URL单独下载这些资源，而不是网络服务器，他们必须从某种方式包括他们。
 
 
 
除了更改相对URL，使它们相对于servlet的URL而不是JSP文件的位置，另一种解决这个问题的方法是使它们相对于域根（即以 /  ）。这样，您就不必担心在更改servlet的网址时再次更改相对路径。
 < head> 
< link rel =stylesheethref =/ 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> 
  
但是，你可能不想硬编码上下文路径。非常合理。您可以通过 $ {pageContext.request.contextPath} 获得EL中的上下文路径。
 < head> 
< link rel =stylesheethref =$ {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> 
  
 （可以轻松缩短< c：set var =rootvalue =$ {pageContext.request.contextPath}/> 并用作 $ {root}  / em> 
 
 
 
或者，如果您不担心不可读的XML和破坏的XML语法高亮，请使用 JSTL   < c：url>  ：
 < head> 
< link rel =stylesheethref =< 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，这反过来很麻烦。为此，您可以使用< base> 标记。所有相对URL都将立即变为相对于它。然而，它开始与方案（ http：// ， https：// 等）。在纯EL中获取基本上下文路径没有一个简单的方法，因此我们需要在这里 JSTL 的帮助。
 <％@ taglib prefix =curi =http：//java.sun。 com / jsp / jstl / core％> 
<％@ taglib prefix =fnuri =http://java.sun.com/jsp/jstl/functions％> 
< c：set var =reqvalue =$ {pageContext.request}/> 
< c：set var =urivalue =$ {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 =stylesheethref =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> 
  
这又有一些注意事项。锚点（ #identifier  URL）也将相对于基本路径！您想要相对于请求URL（URI）。因此，更改为
 < a href =＃identifier> jump< / a> ; 
  
到
 < a href =$ {uri} #identifier> jump< / a> 
  
每种方式都有自己的优点和缺点。这取决于你选择。至少，你现在应该明白这个问题是如何引起的，以及如何解决它：
 
 
 
另请参见：
 
 
 
 
 
 建议使用< base>  html标签？ 
 
 
 
I'm having trouble with loading CSS and images and creating links to other pages when I have a servlet forward to a JSP. Specifically, when I set my <welcome-file> to index.jsp, the CSS is being loaded and my images are being displayed. However, if I set my <welcome-file> to HomeServlet which forwards control to index.jsp, the CSS is not being applied and my images are not being displayed. 

My CSS file is in web/styles/default.css.

My images are in web/images/.

I'm linking to my CSS like so:
<link href="styles/default.css" rel="stylesheet" type="text/css" />
I'm displaying my images as follows:
<img src="images/image1.png" alt="Image1" />
How is this problem caused and how can I solve it?



Update 1: I've added the structure of the application, as well as some other information that might help.



The header.jsp file is the file that contains the link tag for the CSS. The HomeServlet is set as my welcome-file in web.xml:
<welcome-file-list>
    <welcome-file>HomeServlet</welcome-file>
</welcome-file-list>
The servlet is declared and mapped as followes in the 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>




Update 2: I found the problem finally - my servlet was mapped incorrectly. Apparently when setting a Servlet as your <welcome-file> it can't have a URL pattern of /, which I find sort of weird, because wouldn't that stand for the root directory of the site?

The new mapping is as follows:
<servlet-mapping>
    <servlet-name>HomeServlet</servlet-name>
    <url-pattern>/HomeServlet</url-pattern>
</servlet-mapping>

解决方案
All relative URLs in the HTML page generated by the JSP file are relative to the current request URL (the URL as you see in the browser address bar) and not to the location of the JSP file in the server side as you seem to expect. It's namely the webbrowser who has to download those resources individually by URL, not the webserver who has to include them from disk somehow.

Apart from changing the relative URLs to make them relative to the URL of the servlet instead of the location of the JSP file, another way to fix this problem is to make them relative to the domain root (i.e. start with a /). This way you don't need to worry about changing the relative paths once again when you change the URL of the servlet.
<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>
However, you would probably like not to hardcode the context path. Very reasonable. You can obtain the context path in EL by ${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>
(which can easily be shortened by <c:set var="root" value="${pageContext.request.contextPath}" /> and used as ${root} elsewhere)

Or, if you don't fear unreadable XML and broken XML syntax highlighting, use 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>
Either way, this is in turn pretty cumbersome if you have a lot of relative URLs. For that you can use the <base> tag. All relative URL's will instantly become relative to it. It has however to start with the scheme (http://, https://, etc). There's no neat way to obtain the base context path in plain EL, so we need a little help of JSTL here.
<%@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>
This has in turn (again) some caveats. Anchors (the #identifier URL's) will become relative to the base path as well! You would like to make it relative to the request URL (URI) instead. So, change like
<a href="#identifier">jump</a>
to
<a href="${uri}#identifier">jump</a>
Each way has its own pros and cons. It's up to you which to choose. At least, you should now understand how this problem is caused and how to solve it :)

See also:


Is it recommended to use the <base> html tag?


                        
这篇关于当调用转发到JSP的Servlet时，浏览器无法访问/查找相关资源，如CSS，图像和链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！