使用Go服务器时，Mime类型不正确。

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

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代码：

  1. package main
  3. import (
  4.     "net/http"
  5. )
  7. func loginFunc(w http.ResponseWriter, r *http.Request) {
  8.     http.ServeFile(w, r, "index.html")
  9. }
  11. func main() {
  12.     http.HandleFunc("/login/", loginFunc)
  13.     http.ListenAndServe(":8081", nil)
  14. }

以下是HTML代码：

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta name="viewport" content="width=device-width, initial-scale=1">
  5.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7.         <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  8.         <script type="text/javascript" src="js/bootstrap.min.js"></script>
  10.         <style type="text/css">
  11.             .topSpace {
  12.                 margin-top: 15%;
  13.             }
  14.             #mods {
  15.                 background-color: #3AC578;
  16.                 padding-top: 1.5%;
  17.                 padding-bottom: 1.5%;
  18.                 box-shadow: 0px 5px 5px #888888;
  19.                 border-radius: 10px;
  20.             }
  21.         </style>
  22.     </head>
  24.     <body>
  25.         <div class="container-fluid">
  26.             <div class="row topSpace" id="content">
  27.                 <div class="col-xs-4 col-md-4"></div>
  29.                 <div class="col-xs-3 cod-md-3" id="mods">
  30.                     <form class="form-horizontal" role="form">
  31.                         <div class="form-group">
  32.                             <div class="col-sm-12">
  33.                                 <input type="text" class="form-control" id="qlid" placeholder="Quicklook ID" maxlength="8">
  34.                             </div>
  35.                         </div>
  36.                         <div class="form-group">
  37.                             <div class="col-sm-12">
  38.                                 <input type="password" class="form-control" id="pwd" placeholder="Password" maxlength="16">
  39.                             </div>
  40.                         </div>
  41.                         <div class="form-group">
  42.                             <div class="col-sm-offset-1 form-inline">
  43.                                 <div class="checkbox">
  44.                                     <label>
  45.                                         <input id="chkbx" type="checkbox"> Remember me
  46.                                     </label>
  47.                                 </div>
  49.                                 <button type="submit" class="btn btn-primary col-sm-offset-4" id="submitBtn">Sign in</button>
  50.                             </div>
  51.                         </div>
  52.                     </form>
  53.                 </div>
  54.             </div>
  55.         </div>
  56.     </body>
  57. </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:

  1. package main
  2. import(
  3. &quot;net/http&quot;
  4. )
  5. func loginFunc(w http.ResponseWriter, r *http.Request){
  6. http.ServeFile(w, r, &quot;index.html&quot;)
  7. }
  8. func main(){
  9. http.HandleFunc(&quot;/login/&quot;, loginFunc);
  10. http.ListenAndServe(&quot;:8081&quot;, nil);
  11. }

Here's the html:

  1.     &lt;!DOCTYPE HTML&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  5. &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/bootstrap.min.css&quot;&gt;
  6. &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-2.1.1.min.js&quot;&gt;&lt;/script&gt;
  7. &lt;script type=&quot;text/javascript&quot; src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  8. &lt;style type=&quot;text/css&quot;&gt;
  9. .topSpace{
  10. margin-top: 15%;
  11. }
  12. #mods{
  13. background-color: #3AC578;
  14. padding-top: 1.5%;
  15. padding-bottom: 1.5%;
  16. box-shadow: 0px 5px 5px #888888;
  17. border-radius: 10px;
  18. }
  19. &lt;/style&gt;
  20. &lt;/head&gt;
  21. &lt;body&gt;
  22. &lt;div class=&quot;container-fluid&quot;&gt;
  23. &lt;div class=&quot;row topSpace&quot; id=&quot;content&quot;&gt;
  24. &lt;div class=&quot;col-xs-4 col-md-4&quot;&gt;&lt;/div&gt;
  25. &lt;div class=&quot;col-xs-3 cod-md-3&quot; id=&quot;mods&quot;&gt;
  26. &lt;form class=&quot;form-horizontal&quot; role=&quot;form&quot;&gt;
  27. &lt;div class=&quot;form-group&quot;&gt;
  28. &lt;div class=&quot;col-sm-12&quot;&gt;
  29. &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;qlid&quot;  placeholder=&quot;Quicklook ID&quot; maxlength=&quot;8&quot;&gt;
  30. &lt;/div&gt;
  31. &lt;/div&gt;
  32. &lt;div class=&quot;form-group&quot;&gt;
  33. &lt;div class=&quot;col-sm-12&quot;&gt;
  34. &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;pwd&quot;  placeholder=&quot;Password&quot; maxlength=&quot;16&quot;&gt;
  35. &lt;/div&gt;
  36. &lt;/div&gt;
  37. &lt;div class=&quot;form-group&quot;&gt;
  38. &lt;div class=&quot; col-sm-offset-1 form-inline&quot;&gt;
  39. &lt;div class=&quot;checkbox&quot;&gt;
  40. &lt;label&gt;
  41. &lt;input id=&quot;chkbx&quot; type=&quot;checkbox&quot;&gt; Remember me
  42. &lt;/label&gt;
  43. &lt;/div&gt;
  44. &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary col-sm-offset-4&quot; id=&quot;submitBtn&quot;&gt;Sign in&lt;/button&gt;
  45. &lt;/div&gt;
  46. &lt;/form&gt;
  47. &lt;/div&gt;
  48. &lt;/div&gt;
  49. &lt;/div&gt;
  50. &lt;/body&gt;
  51. &lt;/html&gt;

答案1

得分: 2

一种方法是使用nginx，它非常适用于这种任务，并且是使用https的推荐方式。

一个示例配置如下：

  1. server {
  2. listen       0.0.0.0:80;
  3. charset utf-8;
  4. location /s/  {
  5. alias /path/to/app/static/;
  6. autoindex off;
  7. }
  8. location / {
  9. proxy_set_header        Host             $host;
  10. proxy_set_header        X-Real-IP        $remote_addr;
  11. proxy_set_header        X-Forwarded-For  $proxy_add_x_forwarded_for;
  12. # where 9020 is the port your go app is running on
  13. proxy_pass http://127.0.0.1:9020; 
  14. proxy_redirect off;
  15. }
  16. location = /favicon.ico { access_log off; log_not_found off; }
  17. }

参考资料：

英文:

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:

  1. server {
  2. listen       0.0.0.0:80;
  3. charset utf-8;
  4. location /s/  {
  5. alias /path/to/app/static/;
  6. autoindex off;
  7. }
  8. location / {
  9. proxy_set_header        Host             $host;
  10. proxy_set_header        X-Real-IP        $remote_addr;
  11. proxy_set_header        X-Forwarded-For  $proxy_add_x_forwarded_for;
  12. # where 9020 is the port your go app is running on
  13. proxy_pass http://127.0.0.1:9020; 
  14. proxy_redirect off;
  15. }
  16. location = /favicon.ico { access_log off; log_not_found off; }
  17. }

references:

huangapple
  • 本文由 发表于 2014年9月30日 10:27:45
  • 转载请务必保留本文链接：https://go.coder-hub.com/26111815.html
  • css
  • go
  • html
  • http
匿名

发表评论

匿名网友

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

确定