1. 首页
  2. 问题列表
  3. MIME 类型的快速服务器问题（“文本/html”）
提问者：小点点

MIME 类型的快速服务器问题（“文本/html”）


刚开始在我的学校快速服务器模块。我做了一个非常简单的网站只是为了尝试它，但似乎 css 文件没有被执行（在 chrome 的终端 cl 中检查）。

  1. 拒绝应用“http://localhost:3000/public/style.css”中的样式，因为它的 MIME 类型（“text/html”）不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。 首页：26
  2. 获取 http://localhost:3000/public/einstein-home.jpg 404（未找到）
const express = require('express');
    const app = express();
    
    app.use(express.static('public')); 
    
    
    app.get('/home', (request, response) => {
        console.log('dirname', __dirname);
        response.sendFile(__dirname + '/views/home.html')
    });
    
    app.get('/about', (request, response) => {
        console.log('dirname', __dirname);
        response.sendFile(__dirname + '/views/about.html')
    });
    
    app.get('/works', (request, response) => {
        console.log('dirname', __dirname);
        response.sendFile(__dirname + '/views/works.html')
    });
    
    
    app.listen(3000, () => {
        console.log('Website about Einstein');
    });
body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: #f2f2f2;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-style: normal;
    font-weight: 200;
}

.container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: 600px;
    background-color: #FFFFFF;
}

header {
    width: 100%;
    height: 8%;
    background-color: #52bad5;
    border-bottom: 1px solid #2C9AB7;
}

nav {
    float: right;
    width: 50%;
    text-align: right;
    margin-right: 25px;
}
header nav ul {
    list-style: none;
    float: right;
}
nav ul li {
    float: left;
    color: #FFFFFF;
    font-size: 14px;
    text-align: left;
    margin-right: 25px;
    letter-spacing: 2px;
    font-weight: bold;
    transition: all 0.3s linear;
}
ul li a {
    color: #FFFFFF;
    text-decoration: none;
}
ul li:hover a {
    color: #2C9AB7;
}

.text {
    width: 90%;
    text-align: justify;
    font-weight: lighter;
    line-height: 25px;
    float: left;
    padding-left: 20px;
    padding-right: 20px;
    color: #A3A3A3;
}
.about {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 35px;
    display: inline-block;
    background-color: #FFFFFF;
    margin-top: 0px;
}

.foot {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #717070;
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: lighter;
    letter-spacing: 2px;
    border-top-width: 2px;
}


.hidden {
    display: none;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="public/style.css">
        <script src="http://use.edgefonts.net/source-sans-pro:n2:default.js"></script>  

    </head>
    <body>
<div class="container"> 
  
  <header> <a href="">
    </a>
    <nav>
      <ul>
        <li><a href="#hero">HOME</a></li>
        <li><a href="#about">ABOUT</a></li>
        <li> <a href="#work">WORK</a></li>
      </ul>
    </nav>
  </header>
  <img src="/public/einstein.jpg" width="auto" height="361" alt=""/>
  <section class="about" id="about">
    <h2 class="hidden">About</h2>
    <p class="text">Welcome "Einsteiners". Feel free to find navigate in our website.</p>
</section>

  <footer>
    <article class="footer_column"> </article>
    <article class="footer_column"> </article>
  </footer>

  <div class="foot">e=mc2</div>
</div>
</body>
</html>

你能给我一些关于这个问题的反馈吗？

干杯！


共1个答案

匿名用户

我强烈建议不要使用自己的模板：express内置了ejs，如果您需要更详细的内容，可以通过pug或nunjucks添加更好的模板。依靠res.render（）生成HTML文件，不要使用res.write或res.sendFile。

至于为什么事情不能正常工作，请记住阅读静态的工作原理：你告诉Express在进入“真实”路由之前需要检查哪些目录的URL请求，其中 - 至关重要 - 目录的名称没有映射到URL。

一、 e.如果您有：

app.use(express.static('public'))
app.use(express.static('files'))

然后，对< code > your site . TLD/CSS/cake . CSS 的请求将首先在< code>public中检查< code>css/cake.css，然后在< code>files中检查，如果没有匹配的路径，它将检查< code>app.get路由可能匹配的路径。

相关问题