Question

在节点server.js上运行时出现错误。错误提示

拒绝应用'http://localhost:3000/style.css'中的样式，因为它的MIME类型（'text / html'）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。

这是server.js文件，css文件：style.css和html文件：adddpatient.html

 

require('./models/medecinmodel')
require('./models/infirmiermodel')
require('./models/patientmodel')
var medecin= require('./models/medecinmodel')
var infirmier= require('./models/infirmiermodel')
var patient= require('./models/patientmodel')
var express = require("express");
var app = express();
var port = 3000;
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

var mongoose = require('mongoose')


var mongoDb = 'mongodb://127.0.0.1:27017/mydb1' ;
mongoose.connect(mongoDb) ;


mongoose.Promise= global.Promise ;

var db =mongoose.connection ;


db.on('error',console.error.bind(console , 'mongoDb connection error:'));



app.listen(3000,function () {
    console.log("okkkk")
})


app.get('/',function (req,res) {
    res.sendFile(__dirname + "/addpatient.html");
})

.topnav {
    background-color: #333;
    overflow: hidden;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
   
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Add a color to the active/current link */
  .topnav a.active {
    background-color: #4CAF50;
    color: white;
  }

  body { padding: 20px; }
body:before, body:after { content: ""; position: fixed; z-index: 999; background: inherit; left: 0; right: 0; height: 20px; }
body:before { top: 0; }
body:after { bottom: 0; }

<!DOCTYPE html>
<html>
        <link rel="stylesheet" href="style.css" type="text/css" />
<head>
        <style>
           form {
  /* Uniquement centrer le formulaire sur la page */
  
  margin-left: 40%;
  margin-top: 1%;
  width: 700px;
  /* Encadré pour voir les limites du formulaire */
  padding: 2em;
  border: 2px solid rgb(5, 61, 28);
  border-radius: 1em;
}
body {
color:black;
background-color:white;
background-image:url(l.jpg);
background-repeat:no-repeat;
background-size: 100%
}

form div + div {
  margin-top: 1em;
}

label {
  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
  display: inline-block;
  width: 140px;
  text-align: right;
}

input, textarea {
  /* Pour s'assurer que tous les champs texte ont la même police.
     Par défaut, les textarea ont une police monospace */
  font: 1em sans-serif;

 
  width: 300px;
  box-sizing: border-box;

 
  border: 1px solid #999;
}

input:focus, textarea:focus {
  
  border-color: #000;
}

textarea {
 
  vertical-align: top;

  height: 5em;
}

.button {
  
  padding-left: 90px; /* même taille que les étiquettes */
}

button {
  margin-left: .5em;
}
</style>

</head>

<body>
        <div class="topnav">
    
    
                <a href="adddoctor.html" >Add Doctor</a>
                <a href="addnurse.html" >Add nurse</a>
                <a href="addpatient.html" >Add patient</a>
            </div>
<form action="/ajouterpatient" method="GET"> 
    <div>
            <label for="nom">ID </label>
            <input type="text" name="IDpat" placeholder=" Nom..." required></br> </br>
          <div>
  
    <div>
    <label for="nom">Nom </label>
    <input type="text" name="nompat" placeholder=" Nom..." required></br> </br>
  <div>


  <div>
    <label for="prenom">Prénom </label>
    <input type="text" name="prenompat" placeholder="Prenom..." required></br> </br>
  </div>
  
  <div>
        <label for="sexe">Sexe</label>
        <form>
      
                <SELECT name="sexe" size="1" required>
                <OPTION>femme
                <OPTION>homme
                    
                </SELECT> 
            </form></br> </br> 
      </div>
  
      <div>
            <label for="CIN">CIN</label>
            <input type="text" name="CIN" placeholder=" CIN..." required></br> </br>
          </div>

  <div>
        <label for="date_naiss">Date de naissance</label>
        <input type="date" id="start" name="date_naiss" placeholder=" Date de naissance..."
       min="1949-01-01" max="1994-01-1" required></br> </br>
      </div>
 
 
    <div>
      <label for="adresse">Adresse </label>
      <input type="text" name="adresse" placeholder=" Adresse..." required></br></br>
      
       </div>
       <div>   
            <label for="ville">Ville</label> 
            <SELECT name="ville" size="1" required>
            <OPTION>Tunis
            <OPTION>Monastir
            <OPTION>Sousse
            <OPTION>Sfax
            <OPTION>Gabes
            </SELECT> </br> </br>
        
  </div>

    
  
  <div>
        <label for="Code_postal">Code postal</label>
        <input type="text" name="Code_Postal" placeholder=" Code postal..." required></br> </br>
      </div>

      

      <div>
            <label for="tel">Telephone</label>
            <input type="text" name="tel" placeholder="telephone..." required></br> </br>
          </div>

          
          <div>
                <label for="email">Email</label>
                <input type="email" name="email" placeholder="Entrer Email..." required></br> </br>
              </div>


              <div>
                    <label for="nom_ass">Nom de l'assurance</label>
                    <input type="text" name="nom_assurance" placeholder="Nom de l'assurance..." required></br> </br>
                  </div>     

                  <div>
                        <input type="submit" value="Ajouter" >  
                       </div> 
            </body>

           

                           
                               
</form>
</html>

Answer 1

创建一个公共文件夹并在server.js中输入

app.use(express.static(path.join(__dirname, 'public')));

将css文件放入该公用文件夹中。仅提供该文件夹中的所有样式表或静态资源。

Chrome的控制台错误：拒绝应用样式，因为其MIME类型（'text / html'）

1 个答案: