Java HttpServer返回manager.html但JS/CSS/图片无法正常工作问题

你的服务器代码现在只处理了强制添加.html后缀的请求，但页面里的CSS、JS、图片这些静态资源的请求路径并不带.html后缀。当浏览器发起这些资源请求时，服务器会去寻找不存在的.html后缀文件，返回404错误，最终导致资源加载失败、JS无法执行。

举个例子：当页面请求doc/css/style.css时，你的代码会拼接成html/manager/doc/css/style.css.html，这个文件显然不存在，所以浏览器拿不到正确的样式文件；JS和图片的请求逻辑也是一样的问题。而本地直接打开html文件时，浏览器是从本地文件系统直接加载资源，路径解析不受服务器逻辑影响，所以能正常运行。

下面是具体的修复方案，分核心改进点展开：

1. 区分页面请求与静态资源请求 #

不再给所有请求强制添加.html后缀：只有当请求是无后缀的页面路径（比如/manager）时，才补充.html；如果请求本身带有文件后缀（比如.css、.js、.png），直接按原路径查找文件。同时增加路径安全检查，防止恶意路径遍历攻击。

修改后的代码如下：

@Override
public void handle(HttpExchange he) throws IOException {
    String root = "html/manager";
    URI uri = he.getRequestURI();
    String requestPath = uri.getPath();
    File file;

    // 区分页面请求（无文件后缀）和静态资源请求（有后缀）
    if (!requestPath.contains(".")) {
        file = new File(root + requestPath + ".html").getCanonicalFile();
    } else {
        file = new File(root + requestPath).getCanonicalFile();
    }

    // 安全校验：确保请求的文件在root目录范围内，防止路径遍历攻击
    String rootCanonicalPath = new File(root).getCanonicalPath();
    if (!file.getPath().startsWith(rootCanonicalPath)) {
        String response = "403 (Forbidden)\n";
        he.sendResponseHeaders(403, response.length());
        try (OutputStream os = he.getResponseBody()) {
            os.write(response.getBytes());
        }
        return;
    }

    OutputStream os = null;
    try {
        if (!file.isFile()) {
            // 文件不存在，返回404
            String response = "404 (Not Found)\n";
            he.sendResponseHeaders(404, response.length());
            os = he.getResponseBody();
            os.write(response.getBytes());
        } else {
            // 设置对应资源的Content-Type，让浏览器正确解析
            String contentType = getContentType(file.getName());
            he.getResponseHeaders().set("Content-Type", contentType);
            
            // 返回200状态码，用文件长度作为响应体长度
            he.sendResponseHeaders(200, file.length());
            os = he.getResponseBody();
            try (FileInputStream fs = new FileInputStream(file)) {
                final byte[] buffer = new byte[0x10000];
                int count = 0;
                while ((count = fs.read(buffer)) >= 0) {
                    os.write(buffer, 0, count);
                }
            }
        }
    } finally {
        if (os != null) {
            os.close();
        }
    }
}

// 辅助方法：根据文件名返回对应的Content-Type
private String getContentType(String fileName) {
    if (fileName.endsWith(".html")) {
        return "text/html; charset=UTF-8";
    } else if (fileName.endsWith(".css")) {
        return "text/css; charset=UTF-8";
    } else if (fileName.endsWith(".js")) {
        return "application/javascript; charset=UTF-8";
    } else if (fileName.endsWith(".png")) {
        return "image/png";
    } else if (fileName.endsWith(".jpg") || fileName.endsWith(".jpeg")) {
        return "image/jpeg";
    }
    // 其他资源类型可以按需补充
    return "application/octet-stream";
}

2. 关键修复点说明 #

• 路径逻辑优化：动态判断请求类型，确保静态资源能被正确定位，不会被错误添加.html后缀。
• 安全防护：增加路径校验，避免恶意请求访问服务器上的敏感文件。
• Content-Type设置：不同类型的资源返回对应的Content-Type，浏览器才能正确识别并解析CSS、JS和图片，否则即使资源返回成功，也无法正常生效。

3. 测试验证 #

修复后重启服务器：

• 访问/manager，服务器会正确返回html/manager/manager.html页面。
• 页面内的doc/css/style.css、JS脚本、图片等资源请求，会被服务器映射到正确的文件路径，资源加载正常，JS也能顺利执行。

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