Golang中使用net/http无法加载CSS文件的问题如何解决

Golang中使用net/http无法加载CSS文件的问题如何解决 大家好，

首先，我是一个Go语言和Web开发的新手。 我正在尝试编写一个简单的网站，但无法正确配置CSS。

.
├── static
│   └── css
│       └── test.css
├── test.go
└── tmpl
    └── test.html

test.go:

package main

import (
	"log"
	"net/http"
	"text/template"
)

func main() {  

  website := func(w http.ResponseWriter, r *http.Request) {
    templ := template.Must(template.ParseFiles("tmpl/test.html"))
    templ.Execute(w, nil)
  }
  
  http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static")))) 
  http.HandleFunc("/test/", website)

  log.Println("Listening on :8081 ...")
  err := http.ListenAndServe(":8081", nil)
  if err != nil {
    log.Fatal(err)
  }
}

test.html:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="“X-UA-Compatible”" content="“ie" ="edge”" />
    <title>Llynx Demo @ IGMR</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />

    <!-- <style> -->
    <!--   [class*="col"] { -->
    <!--     padding: 1rem; -->
    <!--     background-color: #33b5e5; -->
    <!--     border: 2px solid #fff; -->
    <!--     color: #fff; -->
    <!--     text-align: center; -->
    <!--   } -->
    <!-- -->
    <!--   [class*="con"] { -->
    <!--     padding: 1rem; -->
    <!--     background-color: #9e33e5; -->
    <!--     border: 2px solid #fff; -->
    <!--     color: #fff; -->
    <!--     text-align: center; -->
    <!--   } -->
    <!-- </style> -->

    <link rel="stylesheet" type="text/css" href="static/css/test.css" />
  </head>
  <body>
    <div class="container">
      <h1>HI</h1>
    </div>
  </body>
</html>

以及 test.css:

.col {
  padding: 1rem;
  background-color: #33b5e5;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
}
.con {
  padding: 1rem;
  background-color: #9e33e5;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
}

我观察到的三点：

  1. Chrome开发者工具没有显示无法加载某些CSS文件的错误。
  2. 如果我访问 http://localhost:8081/static/css/test.css，我可以看到.css文件的内容——这很好，对吧？
  3. 在test.html中：如果我把样式写在那里，我可以看到div变成紫色，所以CSS本身应该不是问题？

我已经搜索了3个小时，希望有人能给我一些提示:)

谢谢！


更多关于Golang中使用net/http无法加载CSS文件的问题如何解决的实战教程也可以访问 https://www.itying.com/category-94-b0.html

8 回复

谢谢，但不幸的是，这个方法也不行。

更多关于Golang中使用net/http无法加载CSS文件的问题如何解决的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


href="static/css/test.css"

将你 .html 文件中的这行代码改为：

href="/static/css/test.css"

感谢大家， 我不知道我改了什么，但当我使用另一台电脑时（已经两周没碰这个项目了），它突然就能工作了。

我无法正确配置CSS。

这里有一个示例，展示了如何“添加”你放置在public文件夹中的所有内容。

我认为你的HTML或CSS代码可能有问题。我复制了你示例中的所有内容。只是在CSS文件中添加了h1 color: red，更改了这个斜杠，然后一切就正常工作了。

我通读了所有内容，既没有提到文件结构，也没有一个完整的代码仓库。 没有成功 翻白眼

我通读了所有内容，既没有提到文件结构，也没有一个完整的仓库。

我的文件结构是那种经典的旧式结构。

image

并且在每个服务文件夹的末尾都提到了文件结构 "./public/css"。

http.Handle("/css/", http.StripPrefix("/css/", 
http.FileServer(http.Dir("./public/css"))))

问题出在HTML中CSS文件的路径引用上。你的静态文件服务器配置是正确的，但HTML中的链接使用了相对路径。

在test.html中，CSS链接是：

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

当访问http://localhost:8081/test/时，浏览器会尝试加载http://localhost:8081/test/static/css/test.css，但这个路径不存在。

有两种解决方案：

方案1：使用绝对路径（推荐） 修改test.html中的CSS链接：

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

注意开头的斜杠/，这表示从根路径开始。

方案2：修改Go代码，使用相对路径 如果你希望保持HTML中的相对路径，可以修改路由处理：

package main

import (
	"log"
	"net/http"
	"text/template"
)

func main() {  
	website := func(w http.ResponseWriter, r *http.Request) {
		templ := template.Must(template.ParseFiles("tmpl/test.html"))
		templ.Execute(w, nil)
	}
  
	// 静态文件服务器
	http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static")))) 
	
	// 处理/test/路径
	http.HandleFunc("/test/", website)
	
	// 处理根路径，重定向到/test/
	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		http.Redirect(w, r, "/test/", http.StatusFound)
	})

	log.Println("Listening on :8081 ...")
	err := http.ListenAndServe(":8081", nil)
	if err != nil {
		log.Fatal(err)
	}
}

同时修改test.html，使用相对路径：

<!doctype html>
<html lang="en-US">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Llynx Demo @ IGMR</title>
	<link rel="stylesheet" type="text/css" href="../static/css/test.css" />
</head>
<body>
	<div class="container">
		<h1>HI</h1>
	</div>
</body>
</html>

注意href="../static/css/test.css"中的../，这表示向上返回一级目录。

验证方案1的完整示例：

test.go保持不变，只修改test.html：

<!doctype html>
<html lang="en-US">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Llynx Demo @ IGMR</title>
	<link rel="stylesheet" type="text/css" href="/static/css/test.css" />
</head>
<body>
	<div class="container">
		<h1>HI</h1>
		<div class="col">测试COL类</div>
		<div class="con">测试CON类</div>
	</div>
</body>
</html>

现在访问http://localhost:8081/test/，CSS应该能正常加载。Chrome开发者工具的Network标签页会显示CSS文件成功加载，状态码为200。

回到顶部