使用Golang+Chi路由部署SPA时出现无限循环问题

问题根源 #

无限重载循环的核心原因是：部分静态资源请求未被FileServer正确处理，导致这些请求返回了index.html，浏览器将HTML文件当作JS/CSS等资源解析，执行失败后触发页面重载，形成循环。

常见触发场景：

• 前端资源用绝对路径引用（如/js/app.js），而非带/app前缀的相对路径，导致请求命中NotFound处理器返回index.html
• FileServer仅匹配/app/static/*，但前端存在其他目录下的资源（如/app/assets/），这类请求也会返回index.html

修复方案 #

1. 调整前端资源路径配置 #

将SPA的资源引用改为相对路径，或在前端框架中设置base路径为/app（比如Vue的publicPath、React的homepage配置），确保所有资源请求都带上/app前缀，能被后端路由匹配。

2. 修改Go路由逻辑 #

调整路由优先级与匹配规则，确保API、静态资源、SPA路由依次被正确处理：

package main

import (
    "log"
    "net/http"
    "os"
    "path/filepath"

    "github.com/go-chi/chi/v5"
    "github.com/go-chi/chi/v5/middleware"
    "github.com/joho/godotenv"
)

var indexBuffer []byte

func main() {   
    r := chi.NewRouter()
    
    r.Use(middleware.RequestID)
    r.Use(middleware.RealIP)
    r.Use(middleware.Logger)
    r.Use(middleware.Recoverer)

    // 1. 优先匹配API路由，避免被静态资源或SPA路由拦截
    apiRouter := chi.NewRouter()
    apiRouter.Get("/cargas", handlerCargas)
    r.Mount("/app/api", apiRouter)

    // 2. 处理/app下的所有静态资源
    fs := http.FileServer(http.Dir(os.Getenv("FRONTEND_PATH")))
    r.Route("/app", func(r chi.Router) {
        // 匹配/app下所有静态文件请求（包括static、assets等目录）
        r.Handle("/*", http.StripPrefix("/app", fs))
        // 所有未匹配的/app路径（SPA前端路由）返回index.html
        r.NotFound(indexHandler)
    })

    // 根路径重定向到/app，统一访问入口
    r.Get("/", func(w http.ResponseWriter, r *http.Request) {
        http.Redirect(w, r, "/app", http.StatusPermanentRedirect)
    })

    log.Fatal(http.ListenAndServe(":8000", r))
}

func init() {
    err := godotenv.Load()
    if err != nil {
        log.Fatal("Erro ao ler .env verifique!")
    }

    indexBuffer, err = os.ReadFile(filepath.Join(os.Getenv("FRONTEND_PATH"), "index.html"))
    if err != nil {
        log.Fatal("Erro ao tentar bufferizar a index na init().")
    }
}

func indexHandler(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "text/html")
    w.Write(indexBuffer)
}

关键修改说明 #

• 路由优先级：先挂载API路由，确保接口请求不会被后续规则拦截
• 静态资源全局匹配：用Route("/app")包裹静态资源处理逻辑，让所有/app开头的资源请求都能被FileServer处理
• SPA路由兜底：在/app路由组内设置NotFound，确保所有前端路由（如/app/dashboard）都返回index.html，交由SPA框架接管
• 根路径处理：添加重定向，引导用户统一访问/app入口

额外注意事项 #

• 确认FRONTEND_PATH指向的目录包含index.html及所有静态资源文件
• 前端框架需开启history路由模式（而非hash模式），才能让后端返回index.html后，前端框架正常接管路由逻辑

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