Go使用embed嵌入css/js静态文件出现404与MIME类型错误如何解决

• 404错误原因：你通过//go:embed public/onsen嵌入的资源，embed.FS的根路径是resources包所在目录，所以所有嵌入的文件路径都会携带public/onsen/前缀。当用户请求/static/css/onsenui.css时，经过StripPrefix("/static/")后得到的路径是css/onsenui.css，直接到embed.FS中查找不存在对应文件，因此返回404。
• MIME类型错误原因：绝大多数情况下该问题是404的衍生问题，当请求静态资源返回404错误页面时，响应的Content-Type默认是text/plain，浏览器对CSS文件开启严格MIME校验，因此抛出该错误。如果404解决后仍存在该问题，通常是Windows系统注册表中对应后缀的MIME类型配置错误导致的。

第一步：修复404错误 #

1. 导入io/fs依赖包

import (
    "io/fs"
    // 保留其他原有依赖
)

2. 裁剪embed.FS的前缀路径，修改main函数中静态资源注册逻辑：

func main() {
    // 裁剪embed.FS的public/onsen前缀，将该目录作为静态资源根目录
    subFS, err := fs.Sub(resources.WebUI, "public/onsen")
    if err != nil {
        log.Fatalf("裁剪静态资源路径失败: %v", err)
    }
    http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.FS(subFS))))

    // 原有其他逻辑不变
    http.HandleFunc("/index", index)
    server := http.Server{
        Addr: "127.0.0.1:8070",
    }
    server.ListenAndServe()
}

第二步：修复残留的MIME类型错误 #

如果404解决后仍然存在MIME类型错误，可以通过自定义中间件强制设置静态资源的响应头：

1. 导入strings依赖包

import (
    "strings"
    // 保留其他原有依赖
)

2. 定义MIME类型处理中间件

func staticContentTypeMiddleware(next http.Handler) http.Handler {
    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        switch {
        case strings.HasSuffix(r.URL.Path, ".css"):
            w.Header().Set("Content-Type", "text/css; charset=utf-8")
        case strings.HasSuffix(r.URL.Path, ".js"):
            w.Header().Set("Content-Type", "application/javascript; charset=utf-8")
        case strings.HasSuffix(r.URL.Path, ".png"):
            w.Header().Set("Content-Type", "image/png")
        }
        next.ServeHTTP(w, r)
    })
}

3. 给静态资源处理器加上中间件

http.Handle("/static/", http.StripPrefix("/static/", staticContentTypeMiddleware(http.FileServer(http.FS(subFS)))))

内容的提问来源于stack exchange，提问作者Hasan A Yousef