使用ServeFile与HandleFunc的Golang服务静态资源404问题排查

问题描述 #

用Golang的http.HandleFunc与http.ServeFile搭建HTTP服务时，访问/test路由能正常返回test.html页面，但页面引用的static/css/main.css和static/javascript/sayHello.js文件出现404错误。直接从IDE打开test.html文件时，页面显示正常。需要排查该问题的原因，暂不寻求替代方案。

相关代码 #

Go代码 #

package main

import (
    "fmt"
    "log"
    "net/http"
)

func main() {

    http.HandleFunc("/test", testPageHandler)

    log.Print("Listening on :8080...")
    err := http.ListenAndServe(":8080", nil)
    if err != nil {
        log.Fatal(err)
    }
}

func testPageHandler(w http.ResponseWriter, r *http.Request) {
    http.ServeFile(w, r, "./test.html")
}

HTML代码 #

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Hello</title>
    <link rel="stylesheet" href="static/css/main.css">
    <script src="static/javascript/sayHello.js"></script>

</head>
<body>
<h1>Hello</h1>
<br>
<div id="helloWorld"></div>
<script>showText()</script>
</body>
</html>

CSS代码 #

h1 {
    color: blue;
}

JS代码 #

function showText()
{
    document.getElementById("helloWorld").innerHTML="<p> I'm here </p>";
}

相关截图说明 #

• 浏览器控制台：显示请求http://localhost:8080/test/static/css/main.css和http://localhost:8080/test/static/javascript/sayHello.js返回404状态码
• 项目文件夹结构：根目录下包含main.go、test.html文件，以及static文件夹；static文件夹下有css和javascript子文件夹，分别存放main.css和sayHello.js

问题原因 #

1. 相对路径解析逻辑差异

   • 直接打开本地HTML文件时，浏览器以HTML文件所在的根目录为基准解析相对路径，static/css/main.css能正确指向本地文件系统中的对应文件。
   • 通过HTTP服务访问/test路由时，浏览器会将页面中的相对路径拼接在当前URL路径后，生成/test/static/css/main.css这类请求路径，但你的Go服务只注册了/test这一个路由，没有处理/test/static/...格式的请求，因此返回404。

2. 静态资源未被服务端处理
   你的Go服务仅通过testPageHandler返回test.html文件，没有为static目录下的静态资源注册对应的路由处理器，当浏览器请求这些资源时，服务端没有对应的逻辑响应请求，导致404错误。

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