无法使用带点的相对路径加载Javascript文件
minecraftplayer1234：
所以我确实有这个项目结构：
index.html我写的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/dir，并将路径更改index.html为just src="app.js"。出乎意料的是，它可以正常工作，XD并被打印到控制台中。现在我做错什么了吗？还是.js文件应该与文件位于同一目录树中.html？
列宁哈斯达：
没错 问题是您可以从Web tmpl目录访问唯一的目录。
http.Handle("/", http.FileServer(http.Dir("tmpl")))
因此，当您键入localhost:8080内容时，基本上是从该目录浏览文件，而静态文件不存在。但是，当您将app.js文件移动到tmpl目录时，它可以工作，因为现在可以从Web上访问它了。
因此，您只需要将静态内容包含在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渲染它。同样，您也可以渲染其他模板文件。希望对您有所帮助！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用
- 2
使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中
- 3
Swift 2.1-对单个单元格使用UITableView
- 4
SQL Server中的非确定性数据类型
- 5
如何避免每次重新编译所有文件？
- 6
Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听
- 7
在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID
- 8
HttpClient中的角度变化检测
- 9
在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？
- 10
在Wagtail管理员中，如何禁用图像和文档的摘要项？
- 11
通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）
- 12
构建类似于Jarvis的本地语言应用程序
- 13
Camunda-根据分配的组过滤任务列表
- 14
如何了解DFT结果
- 15
Embers js中的更改侦听器上的组合框
- 16
ggplot：对齐多个分面图-所有大小不同的分面
- 17
使用分隔符将成对相邻的数组元素相互连接
- 18
PHP Curl PUT 在 curl_exec 处停止
- 19
您如何通过 Nativescript 中的 Fetch 发出发布请求？
- 20
错误：找不到存根。请确保已调用spring-cloud-contract：convert
- 21
应用发明者仅从列表中选择一个随机项一次
我来说两句