gorilla mux sets wrong path for static files when using variables

I have the following routing set up:

func (app *application) routes() *mux.Router {
    r := mux.NewRouter()
    fs := http.FileServer(http.Dir("./ui/static/"))
    r.PathPrefix("/ui/static/").Handler(http.StripPrefix("/ui/static/", fs))

    authRequired := r.PathPrefix("/").Subrouter()

    authRequired.HandleFunc("/foo", app.foo).Methods("POST") // <- this one works fine
    authRequired.HandleFunc("/bar/{id:[0-9]+}", app.bar) // <- this does not

    return r
}

When I call the URL http://server/foo everything is fine.
With e.g. http://server/bar/1 the site gets delivered but I get error messages like

The resource "http://server/bar/ui/static/css/style.css" has been blocked due to mime type mismatch

The /bar in http://server/bar/ui/static/... shouldn't be there. How do I fix this?

Solution

The resource "http://server/bar/ui/static/css/style.css" has been blocked due to mime type mismatch

The "mime type mismatch" error is sometimes the result of the file not being found and the browser receiving some default response whose body contains not css but probably just some plain text, or html at the most.

If you take a look at the path causing the error:

http://server/bar/ui/static/css/style.css

And then the path under which you've registered your static file handler:

r.PathPrefix("/ui/static/").Handler( ...

You will see that the browser is looking for the file in the wrong place, and if you consider that this specific error occurs specifically when you're on /bar you can infer that the problem is caused by relative links in the html (and/or static files properly linked by the html) that's served by the /bar handler.

So the solution is to use absolute paths in your static and html files.

When I call the URL http://server/foo everything is fine.

Note that /foo seems to be registered under the POST method, such an endpoint will not cause the browser to issue subsequent requests for static files, like an html returning GET endpoint might, hence it has not reason to fail with the static file "mime type mismatch" error.