使用 node.js 以错误的 mime 类型发送样式表，我该如何解决？
Posted
技术标签:
【中文标题】使用 node.js 以错误的 mime 类型发送样式表，我该如何解决？【英文标题】：Stylesheet is sent with a wrong mime type using node.js, how do I fix that? 【发布时间】：2016-01-29 20:41:29 【问题描述】：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://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
node.js 代码在根目录，html 和 css 在 /public 子目录。 每次我加载侧面时，我都会得到： 资源解释为样式表，但使用 MIME 类型 text/html 传输：“http://localhost:3000/css/app.css”。
我该如何解决这个问题？
【问题讨论】：
【参考方案1】：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 用于公共子网址时，它才发生变化。
【讨论】：
以上是关于使用 node.js 以错误的 mime 类型发送样式表，我该如何解决？的主要内容，如果未能解决你的问题，请参考以下文章
将音频从浏览器流式传输到具有特定 MIME 类型的 node.js 服务器
node.js express - mime 类型 woff 字体返回为 text/plain 类型
node.js 中的标头 - 套接字 io 资源解释为脚本，但使用 MIME 类型 text/plain 传输：