英文:
MIme types not correct when using Go server
问题
我正在学习如何使用Go创建后端，并且我创建了一个简单的服务器，只加载一个登录页面。当页面加载时，外部的CSS和JS文件没有被加载。当我查看控制台以查看问题时，我得到了这个消息："Resource interpreted as Stylesheet but transferred with MIME type text/html: http://localhost:8081/login/css/bootstrap.min.css"。我在HTML文件中包含的所有CSS和JS文件都出现了这个错误。
以下是Go代码：
package main
import (
"net/http"
)
func loginFunc(w http.ResponseWriter, r *http.Request) {
http.ServeFile(w, r, "index.html")
}
func main() {
http.HandleFunc("/login/", loginFunc)
http.ListenAndServe(":8081", nil)
}
以下是HTML代码：
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
.topSpace {
margin-top: 15%;
}
#mods {
background-color: #3AC578;
padding-top: 1.5%;
padding-bottom: 1.5%;
box-shadow: 0px 5px 5px #888888;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row topSpace" id="content">
<div class="col-xs-4 col-md-4"></div>
<div class="col-xs-3 cod-md-3" id="mods">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" id="qlid" placeholder="Quicklook ID" maxlength="8">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" class="form-control" id="pwd" placeholder="Password" maxlength="16">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 form-inline">
<div class="checkbox">
<label>
<input id="chkbx" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary col-sm-offset-4" id="submitBtn">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
英文:
I'm learning how to make a backend with Go and I made a simple server that just loads a login page. When the page is loaded the external css and js files are not being loaded. When I looked to see what was wrong in the console I got this message "Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8081/login/css/bootstrap.min.css". " I get this error for all the css and js files included in the html file.
Here is the Go code:
package main
import(
"net/http"
)
func loginFunc(w http.ResponseWriter, r *http.Request){
http.ServeFile(w, r, "index.html")
}
func main(){
http.HandleFunc("/login/", loginFunc);
http.ListenAndServe(":8081", nil);
}
Here's the html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
.topSpace{
margin-top: 15%;
}
#mods{
background-color: #3AC578;
padding-top: 1.5%;
padding-bottom: 1.5%;
box-shadow: 0px 5px 5px #888888;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row topSpace" id="content">
<div class="col-xs-4 col-md-4"></div>
<div class="col-xs-3 cod-md-3" id="mods">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" id="qlid" placeholder="Quicklook ID" maxlength="8">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" class="form-control" id="pwd" placeholder="Password" maxlength="16">
</div>
</div>
<div class="form-group">
<div class=" col-sm-offset-1 form-inline">
<div class="checkbox">
<label>
<input id="chkbx" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary col-sm-offset-4" id="submitBtn">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
答案1
得分: 2
一种方法是使用nginx，它非常适用于这种任务，并且是使用https的推荐方式。
一个示例配置如下：
server {
listen 0.0.0.0:80;
charset utf-8;
location /s/ {
alias /path/to/app/static/;
autoindex off;
}
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# where 9020 is the port your go app is running on
proxy_pass http://127.0.0.1:9020;
proxy_redirect off;
}
location = /favicon.ico { access_log off; log_not_found off; }
}
参考资料：
- 个人经验。
- http://nginx.com/resources/admin-guide/serving-static-content/
- https://stackoverflow.com/questions/10631933/nginx-static-file-serving-confusion-with-root-alias
英文:
One way is to use nginx, it's extremely optimized for that kind of tasks, and it is the recommended way to use https.
An example conf is:
server {
listen 0.0.0.0:80;
charset utf-8;
location /s/ {
alias /path/to/app/static/;
autoindex off;
}
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# where 9020 is the port your go app is running on
proxy_pass http://127.0.0.1:9020;
proxy_redirect off;
}
location = /favicon.ico { access_log off; log_not_found off; }
}
references:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论