CODEWITHSUNDEEP
gogorillamuxfileserver
Brian Nys
Brian Nys

Reputation: 11

MIME type error when applying CSS files with GO Gorilla mux server

I'm having issues with including css files in a GO webserver using Gorilla Mux. I get the following error in the Google Chrome console:

forum:1 Refused to apply style from 'http://localhost:8080/css/forum.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I understand that a lot of people fail using a FileServer by handling the "/" wrong, but this also won't work for me. My file struture is as follow: file structure When I run the server, I execute in cmd: go run src/main.go. I also tried running it in the src folder. But that won't work too. In the HTML file, I add the css file with 

<link rel="stylesheet" type="text/css" href="/css/forum.css" />

My GO code is below. I tried handling the FileServer in two ways, one of them is commented out above the other. Both won't work. Everything else is working except the FileServer.

package main

import (
    "fmt"
    "net/http"
    "html/template"

    "github.com/gorilla/mux"
)

var templates *template.Template

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

    templates = template.Must(template.ParseGlob("src/templates/*.html"))
    cssHandler := http.FileServer(http.Dir("./static/css"))

    r.HandleFunc("/home", homeGetHandler).Methods("GET")
    r.HandleFunc("/home", homePostHandler).Methods("POST")
    r.HandleFunc("/forum", forumGetHandler).Methods("GET")
    r.HandleFunc("/forum", forumPostHandler).Methods("POST")

    http.Handle("/forum", r)
    http.Handle("/home", r)
    // http.Handle("/css/", http.StripPrefix("/src/static/css/", cssHandler))
    r.PathPrefix("/css/").Handler(http.StripPrefix("/src/static/css/", cssHandler))


    http.ListenAndServe(":8080", nil)
}

func homeGetHandler(w http.ResponseWriter, r *http.Request) {
    templates.ExecuteTemplate(w, "home.html", nil)
}

func homePostHandler(w http.ResponseWriter, r *http.Request) {
    r.ParseForm()
    comment := r.PostForm.Get("comment")
    fmt.Println(comment)
    http.Redirect(w, r,"/home", 302)
}

func forumGetHandler(w http.ResponseWriter, r *http.Request) {
    templates.ExecuteTemplate(w, "forum.html", nil)
}

func forumPostHandler(w http.ResponseWriter, r *http.Request) {
    r.ParseForm()
    comment := r.PostForm.Get("post")
    fmt.Println(comment)
    http.Redirect(w, r,"/forum", 302)
}

[SOLUTION] I found the answer:

http.Handle("/forum", r)
http.Handle("/home", r)

should just be:

http.Handle("/",r)

Upvotes: 1

Views: 1941

Answers (2)

Roman Kiselenko
Roman Kiselenko

Reputation: 44380

What's because you're serving your css file with wrong MIME type, you should set right header for css. Use:

func serveCss(w http.ResponseWriter, r *http.Request) {
  // some code here
  w.Header().Add("Content-Type", "text/css")
  // some code here
}

Upvotes: 1

Burak Serdar
Burak Serdar

Reputation: 51657

The problem is that your csshandler returns the contents of the file with Content-Type set to "text/plain". You have to set it to "text/css" to have the browser interpret it as a CSS file. You can set the content type before returning the file contents using a middleware-like function:

func SetHeader(header,value string, handle http.Handler) func(http.ResponseWriter,*http.Request) {
   return func(w http.ResponseWriter,req *http.Request) {
       w.Header().Set(header,value)
       handle.ServeHTTP(w,req)
   }
}

r.PathPrefix("/css/").HandlerFunc(SetHeader("Content-Type","text/css",http.StripPrefix("/src/static/css/", cssHandler)))

Upvotes: 1

Related Questions