发表新帖
发表新帖

Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP

前端 未结
关注
9 1333
小蘑菇
小蘑菇 2020-11-21 05:43

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

相关标签:
9条回答
  • 野的像风
    2020-11-21 06:12

    As for your update, I was confused for the reasoning behind in. Dug a little deeper and found this gem:

    • yoursite.com becomes yoursite.com/
    • yoursite.com/ is a directory, so the welcome-file-list is scanned
    • yoursite.com/CMS is the first welcome-file ("CMS" in the welcome-file-list), and there is a mapping of /CMS to the MyCMS servlet, so that servlet is accessed.

    Source: http://wiki.metawerx.net/wiki/HowToUseAServletAsYourMainWebPage

    So, the mapping then does make sense.

    And one can now freely use ${pageContext.request.contextPath}/path/ as src/href for relative links!

    0 讨论(0)
  • 情歌与酒
    2020-11-21 06:12

    short answer - add following line in the jsp which will define the base
    base href="/{root of your application}/"

    0 讨论(0)
  • 礼貌的吻别
    2020-11-21 06:16

    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?
    0 讨论(0)
 看不清?
提交回复
热议问题