Stylesheet is sent with a wrong mime type using node.js, how do I fix that?
node.js/express code
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 code
html, body{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.wrap {
margin: 0 auto;
}
header{
background: url(http://media.giphy.com/media/S3bkh4BuHMyfC/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
the node.js code is in the root directory, the html and css are in /public subdir. Every time I load the side I get: Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/css/app.css".
How can I fix that?
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);
So I rewrote my code like so, and that worked. It only changed when I used the express.static for the public sub url.
链接地址: http://www.djcxy.com/p/47016.html上一篇: MIME类型text / html