基于Gorilla/Mux的Golang静态文件服务器多路由适配问题

我之前在做React+Golang的项目时也踩过这个路由顺序的坑，给你梳理下解决方案：

问题根源 #

Gorilla Mux是按路由定义的顺序匹配请求的，如果你的静态资源路由被放在页面路由之后，尤其是当你用了全局匹配的路由时，静态资源请求（比如/static/js/main.js）会被错误地匹配到返回index.html的路由，导致React加载不了资源，页面异常。

正确的路由配置顺序 #

你需要把静态资源路由放在最前面，确保所有/static/开头的请求优先被处理，之后再配置返回index.html的页面路由。

完整代码示例 #

package main

import (
	"net/http"
	"github.com/gorilla/mux"
)

func main() {
	r := mux.NewRouter()

	// 1. 优先处理静态资源：匹配所有/static/开头的请求，转发到本地static目录
	r.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir("./static"))))

	// 2. 配置需要返回index.html的路由
	// 方式一：单独指定每个路由（适合你当前的/和/student场景）
	r.HandleFunc("/", serveIndexPage).Methods("GET")
	r.HandleFunc("/student", serveIndexPage).Methods("GET")

	// 方式二：全局匹配所有非静态资源请求（如果后续React会加更多路由，推荐用这个）
	// r.PathPrefix("/").HandlerFunc(serveIndexPage).Methods("GET")

	http.Handle("/", r)
	if err := http.ListenAndServe(":8080", nil); err != nil {
		panic(err)
	}
}

// 统一返回index.html的函数
func serveIndexPage(w http.ResponseWriter, r *http.Request) {
	// 注意这里的index.html路径要和你的项目结构对应
	http.ServeFile(w, r, "./index.html")
}

关键注意点 #

• 静态路由必须前置：PathPrefix("/static/")会优先匹配所有以/static/开头的请求，避免被后面的页面路由拦截。
• React的资源引用路径：你已经用了根目录基准的/static/...，这和Golang的静态路由配置完全匹配，不需要调整React的publicPath配置。
• 测试验证：启动服务后，访问/或/student，打开浏览器控制台检查静态资源的请求状态，确保它们返回的是正确的JS/CSS文件，而不是index.html。

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