使用Gorilla Mux在Go中无法加载JavaScript及资源文件的问题

问题概况 #

项目采用Gorilla Mux搭建HTTP服务器，配置静态资源路由后，仅static目录的HTML和styles目录的CSS能正常加载，scripts下的JS文件和assets下的图片资源均无法加载，配置逻辑看似一致但无效。

项目文件结构 #

-- api
   -> api.go
-- styles
   -> style1.css
   -> style2.css
   -> ...
-- scripts
   -> script1.js
   -> script2.js
   -> ...
-- static
   -> page1.html
   -> page2.html
   -> ...
-- assets
   -> image1.png
   -> image2.png
   -> ...
-- main.go

服务器路由配置（api.go） #

func (api *APIServer) Run() {
    router := mux.NewRouter()

    router.PathPrefix("/styles/").Handler(http.StripPrefix("/styles/",
        http.FileServer(http.Dir("styles"))))

    router.PathPrefix("/").Handler(http.StripPrefix("/",
        http.FileServer(http.Dir("static"))))

    router.PathPrefix("/scripts/").Handler(http.StripPrefix("/scripts/",
        http.FileServer(http.Dir("scripts"))))

    router.PathPrefix("/assets/").Handler(http.StripPrefix("/assets/",
        http.FileServer(http.Dir("assets"))))

    if err := http.ListenAndServe(api.listenAddr, router); err != nil {
        log.Printf("error starting server %s", err.Error())
    }
    fmt.Println("server start running")
}

HTML资源引用示例 #

<link rel="stylesheet" type="text/css" href="styles\login.css" />
<script src="scripts\login.js"></script>
<img
    id="img-show"
    src="assets\bin.png"
    alt=""
    width="25px"
/>

问题根源 #

1. 路由匹配优先级错误：Gorilla Mux按路由注册顺序进行匹配，router.PathPrefix("/")是全局通配路由，注册在/scripts/和/assets/路由之前，导致所有以/scripts/、/assets/开头的请求被优先拦截，转而到static目录查找资源，必然返回404。
2. 路径分隔符不规范：HTML中使用Windows风格的反斜杠\作为路径分隔符，而HTTP URL标准要求使用正斜杠/，部分浏览器无法正确解析反斜杠路径，导致请求地址无效。

解决方案 #

1. 调整路由注册顺序 #

将全局通配路由/移至所有具体前缀路由的最后，确保精确路由先匹配：

func (api *APIServer) Run() {
    router := mux.NewRouter()

    // 先注册具体前缀的静态资源路由
    router.PathPrefix("/styles/").Handler(http.StripPrefix("/styles/",
        http.FileServer(http.Dir("styles"))))
    router.PathPrefix("/scripts/").Handler(http.StripPrefix("/scripts/",
        http.FileServer(http.Dir("scripts"))))
    router.PathPrefix("/assets/").Handler(http.StripPrefix("/assets/",
        http.FileServer(http.Dir("assets"))))

    // 最后注册全局通配路由
    router.PathPrefix("/").Handler(http.StripPrefix("/",
        http.FileServer(http.Dir("static"))))

    if err := http.ListenAndServe(api.listenAddr, router); err != nil {
        log.Printf("error starting server %s", err.Error())
    }
    fmt.Println("server start running")
}

2. 修正HTML路径分隔符 #

将所有路径中的反斜杠\替换为标准正斜杠/：

<link rel="stylesheet" type="text/css" href="styles/login.css" />
<script src="scripts/login.js"></script>
<img
    id="img-show"
    src="assets/bin.png"
    alt=""
    width="25px"
/>

验证 #

重启服务器后刷新页面，查看浏览器控制台是否仍有404错误，同时检查网络请求中scripts和assets资源的HTTP状态码是否为200。

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