使用 GO Gorilla mux 服务器应用 CSS 文件时出现 MIME 类型错误答案

【问题标题】：MIME type error when applying CSS files with GO Gorilla mux server使用 GO Gorilla mux 服务器应用 CSS 文件时出现 MIME 类型错误
【发布时间】：2020-09-18 04:18:07
【问题描述】：

我在使用 Gorilla Mux 在 GO 网络服务器中包含 css 文件时遇到问题。我在 Google Chrome 控制台中收到以下错误：

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.

我知道很多人在使用 FileServer 时会因为处理 "/" 错误而失败，但这对我也不起作用。我的文件结构如下： file structure 当我运行服务器时，我在 cmd 中执行：go run src/main.go。我还尝试在src 文件夹中运行它。但这也行不通。在 HTML 文件中，我使用

添加了 css 文件

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

我的 GO 代码如下。我尝试以两种方式处理 FileServer，其中一种在另一种上方被注释掉。两者都行不通。除了 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)
}

[解决方案] 我找到了答案：

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

应该是：

http.Handle("/",r)

【问题讨论】：

您的请求没有“/src/static/css/”前缀。您将请求路径与文件系统路径混淆了。看起来http.StripPrefix("/css/", cssHandler) 可能有用。

标签： go gorilla mux fileserver

【解决方案1】：

这是因为您使用错误的 MIME 类型提供 css 文件，您应该为 css 设置正确的标题。使用：

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

【讨论】：

如果我在 HandleFunc 中添加它，我只会在浏览器中得到纯 HTML 文本

【解决方案2】：

问题在于您的 csshandler 返回文件的内容，其中 Content-Type 设置为“text/plain”。您必须将其设置为“text/css”才能让浏览器将其解释为 CSS 文件。您可以使用类似中间件的函数在返回文件内容之前设置内容类型：

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)))

【讨论】：