Question

所以我确实有这个项目结构：

我写的HTML index.html文件：

<!DOCTYPE html>
<html>

<body>

    <head>
        XD
    </head>
    <script type="text/javascript" src="../static/js/app.js"></script>
    <button type="button" onclick="XD()">
        XD</button>
</body>

</html>

app.js档案：

function XD() {
    console.log("XD")
}

最后main.go：

package main

import (
    "net/http"
)

func main() {
    http.Handle("/", http.FileServer(http.Dir("tmpl")))
    http.ListenAndServe(":8080", nil)
}

在我使用标题和按钮加载到localhost:8080页面时构建并运行应用程序（具有来自防火墙等的所有权限）。但在开发控制台中，我可以看到以下消息：

GET http://localhost:8080/static/js/app.js [HTTP/1.1 404 Not Found 3ms]
The resource from “http://localhost:8080/static/js/app.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

好吧我以为它可能与错误的相对路径有关（虽然当我按Ctrl + LeftClick，然后VSCode将我准确地带到app.js文件）。我将app.js文件移至tmpl/目录，并将index.html中的路径更改为src="app.js"。令人惊讶的是它有效，XD被打印到控制台中。我现在做错了吗？或者.js文件应该与.html文件位于同一目录树中吗？

Answer 1

没有错。问题是您可以从Web tmpl目录访问的唯一目录。

http.Handle("/", http.FileServer(http.Dir("tmpl")))

因此，当您键入localhost:8080时，您基本上是从该目录浏览文件而静态文件不存在。但是，当您将app.js文件移动到tmpl目录时，它可以正常工作，因为现在可以从网络访问它。

因此，您只需将静态内容放在tmpl或更准确的Web可访问目录中。

<强>更新

上述解决方案描述了如何从单个目录中serve个文件（html，css，js等）。
另一种方法是serve只是静态文件（css，js等）和render模板（html）。您可以像现在一样使用不同的静态文件和模板文件夹。

在main.go档案

中

func main() {
    fs := http.FileServer(http.Dir("./static"))
    http.Handle("/static/", http.StripPrefix("/static/", fs))

    http.HandleFunc("/", indexHandler)
    http.ListenAndServe(":5000", nil)
}

func indexHandler(w http.ResponseWriter, r *http.Request) {
    tpl, _ := ioutil.ReadFile("./tmpl/index.html")
    tplParsed, _ := template.New("test").Parse(string(tpl))
    tplParsed.Execute(w, nil)
}

这里我们在http://localhost:5000/static端点中提供静态文件。因此，在index.html文件中，app.js链接应为/static/js/app.js。

请注意，我们不直接提供html文件，而是使用http/template package呈现它。同样，您也可以渲染其他模板文件。希望有所帮助！

无法使用带点的相对路径加载Javascript文件

1 个答案: