无法调用嵌入的 CSS/JS 文件。

huangapple
go评论121阅读模式
英文:

Can not call embed css/js files

问题

我正在嵌入我的CSS和JS文件，代码如下所示：

  1. package resources
  3. import (
  4. 	"embed"
  5. )
  7. // WebUI 是我们从 Onsen UI 导入的静态 Web UI。
  8. //go:embed public/onsen
  9. var WebUI embed.FS
  11. // Views 是我们的静态 Web 服务器布局、带有动态内容的视图和静态视图的部分内容。
  12. //go:embed templates/layouts templates/views templates/partials
  13. var Views embed.FS

并尝试在我的主函数中将 WebUI 定义为 static 文件夹：

  1. package main
  3. import (
  4. 	"fmt"
  5. 	"log"
  6. 	"html/template"
  7. 	"net/http"
  8. 	"onsen/resources"
  9. )
  11. var view *template.Template
  12. var err error
  14. func init() {
  15. 	fmt.Println("Starting up.")
  16. 	view = template.Must(template.ParseFS(resources.Views, "templates/layouts/*.html", "templates/views/*.html", "templates/partials/*.html"))
  18. 	if err != nil {
  19. 		log.Fatal("Error loading templates:" + err.Error())
  20. 	}
  21. }
  23. func main() {
  24. 	http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.FS(resources.WebUI))))
  25. 	//http.Handle("/static/", http.FileServer(http.FS(resources.WebUI)))
  27. 	http.HandleFunc("/index", index)
  28. 	server := http.Server{
  29. 		Addr: "127.0.0.1:8070",
  30. 	}
  31. 	server.ListenAndServe()
  32. }
  34. func index(w http.ResponseWriter, r *http.Request) {
  35. 	err = view.ExecuteTemplate(w, "index.html", nil)
  36. 	if err != nil {
  37. 		log.Fatalln(err)
  38. 	}
  39. }

文件夹结构如下所示：

无法调用嵌入的 CSS/JS 文件。

但是在运行时，我遇到了以下错误：

无法调用嵌入的 CSS/JS 文件。

CSS 文件：拒绝应用样式从 'http://127.0.0.1:8070/static/css/onsenui.css'，因为它的 MIME 类型 ('text/plain') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

JS 文件：加载资源失败：服务器响应状态为 404 (未找到)

英文:

I'm embedding my css and js files as below:

  1. package resources
  3. import (
  4. 	"embed"
  5. )
  7. // WebUI is our static web ui from onsen ui.
  8. //go:embed public/onsen
  9. var WebUI embed.FS
  11. // Views is our static web server layouts, views with dynamic content and partials content that is a static view.
  12. //go:embed templates/layouts templates/views templates/partials
  13. var Views embed.FS

And trying to define this WebUI as static folder in my main function:

  1. package main
  3. import (
  4.     "fmt"
  5.     "log"
  6.     "html/template"
  7. 	"net/http"
  8. 	"onsen/resources"
  9. )
  11. var view *template.Template
  12. var err error
  14. func init() {
  15. 	fmt.Println("Starting up.")
  16. 	view = template.Must(template.ParseFS(resources.Views, "templates/layouts/*.html", "templates/views/*.html", "templates/partials/*.html"))
  18. 	if err != nil {
  19. 		log.Fatal("Error loading templates:" + err.Error())
  20. 	}
  21. }
  23. func main() {
  24. 	http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.FS(resources.WebUI))))
  25. 	//http.Handle("/static/", http.FileServer(http.FS(resources.WebUI)))
  27.     http.HandleFunc("/index", index)
  28.     server := http.Server{
  29. 		Addr: "127.0.0.1:8070",
  30. 	}
  31.     server.ListenAndServe()
  32. }
  34. func index(w http.ResponseWriter, r *http.Request) {
  35. 	err = view.ExecuteTemplate(w, "index.html", nil)
  36. 	if err != nil {
  37. 		log.Fatalln(err)
  38. 	}
  39. }

The folders structure is as shown:

无法调用嵌入的 CSS/JS 文件。

But a running, I' getting the below errors:

无法调用嵌入的 CSS/JS 文件。

  1. CSS files: Refused to apply style from 'http://127.0.0.1:8070/static/css/onsenui.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
  2. JS files: Failed to load resource: the server responded with a status of 404 (Not Found)

答案1

得分: 0

我通过修复static路由来解决了这个问题，代码如下：

  1. http.Handle("/webUI/", http.StripPrefix("/webUI/", http.FileServer(http.FS(resources.WebUI))))

同时，css和js文件的调用如下：

  1. <link rel="stylesheet" type="text/css" href="/webUI/public/onsen/css/onsenui.css"/>

即：
'静态路径[/webUI] + 原始路径[public/onsen/...]

英文:

I solved it by fixing the static route as:

  1. http.Handle(&quot;/webUI/&quot;, http.StripPrefix(&quot;/webUI/&quot;, http.FileServer(http.FS(resources.WebUI))))

And both css and js files calls as:

  1. &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/webUI/public/onsen/css/onsenui.css&quot;/&gt;

that is:
&#39;The static path [/webUI] + the original route [public/onsen/...]

huangapple
  • 本文由 发表于 2021年10月23日 02:59:46
  • 转载请务必保留本文链接：https://go.coder-hub.com/69681914.html
  • go
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定