Chrome 控制台错误:拒绝应用样式，因为其 MIME 类型 ('text/html') [英] The console of Chrome error : Refused to apply style because its MIME type ('text/html')

问题描述

在 node server.js 上运行时出现错误.错误如下:

<块引用>

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

这是server.js文件中node的代码:

要求('./models/medecinmodel')require('./models/infirmiermodel')要求('./模型/患者模型')var medecin= require('./models/medecinmodel')var infirmier= require('./models/infirmiermodel')var患者=需要('./models/patientmodel')var express = require("express");var app = express();无功端口 = 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';猫鼬.connect(mongoDb) ;mongoose.Promise= global.Promise ;var db =mongoose.connection ;db.on('error',console.error.bind(console, 'mongoDb 连接错误:'));app.listen(3000,function () {控制台日志(okkkk")})app.get('/',function (req,res) {res.sendFile(__dirname + "/addpatient.html");})这是样式代码，`css 文件:style.css`:

.topnav {背景色:#333；溢出:隐藏；}/* 设置导航栏中链接的样式 */.topnav a {向左飘浮;颜色:#f2f2f2；文本对齐:居中；填充:14px 16px；文字装饰:无；字体大小:17px；}/* 更改悬停时链接的颜色 */.topnav a:悬停{背景色:#ddd;颜色:黑色;}/* 为活动/当前链接添加颜色 */.topnav a.active {背景色:#4CAF50；白颜色;}身体 { 填充:20px;}正文:之前，正文:之后{内容:"；位置:固定；z-索引:999；背景:继承；左:0；右:0；高度:20px；}身体:之前{顶部:0;}身体:在{底部:0之后；}这是`html 文件:adddpatient.html`

<link rel="stylesheet" href="style.css" type="text/css"/><头><风格>形式 {/* Uniquement centerr le formulaire sur la page */左边距:40%；保证金最高:1%；宽度:700px；/* Encadré pour voir les limites du formulaire */填充:2em；边框:2px 实心 rgb(5, 61, 28);边界半径:1em；}身体 {颜色:黑色;背景颜色:白色；背景图片:网址(l.jpg)；背景重复:不重复；背景尺寸:100%}表单 div + div {边距顶部:1em；}标签 {/* Pour être sûrs que toutes les étiquettes ont meme taille et sont Correctement alignées */显示:内联块；宽度:140px；文本对齐:右；}输入，文本区域{/* 将 s'assurer que tous les champs texte ont la meme police.Par défaut, les textarea ont une police monospace */字体:1em sans-serif；宽度:300px；box-sizing: 边框框；边框:1px 实心 #999；}输入:焦点，文本区域:焦点{边框颜色:#000；}文本区域{垂直对齐:顶部；高度:5em；}.按钮 {padding-left: 90px;/* meme taille que les étiquettes */}按钮 {左边距:0.5em；}</风格><身体><div class="topnav"><a href="adddoctor.html" >添加医生</a><a href="addnurse.html" >添加护士</a><a href="addpatient.html" >添加患者</a>

<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><label for="sexe">性别</label><表格><SELECT name="sexe" size="1" required><选项>女性<选项>人</form></br></br>

<div><label for="CIN">CIN</label><input type="text" name="CIN" placeholder="CIN..." required></br></br>

<div><label for="date_naiss">诞生日期</label><input type="date" id="start" name="date_naiss" placeholder="Date de naissance..."min="1949-01-01" max="1994-01-1" 需要></br></br>

<div><label for="adresse">Adresse </label><input type="text" name="adresse" placeholder="Adresse..." required></br></br>

<div><label for="ville">Ville</label><OPTION>突尼斯<OPTION>莫纳斯提尔<选项>苏斯<OPTION>斯法克斯<选项>加贝斯</br></br>

<div><label for="Code_postal">邮政编码</label><input type="text" name="Code_Postal" placeholder="邮政编码..." 需要></br></br>

<div><label for="tel">电话</label><input type="text" name="tel" placeholder="telephone..." required></br></br>

<div><label for="email">电子邮件</label><input type="email" name="email" placeholder="Entrer Email..." required></br></br>

<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><input type="submit" value="Ajouter" >

</表单></html>

解决方案

创建公用文件夹并在 server.js 中进行输入

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

将您的 css 文件放在该公共文件夹中.仅提供该文件夹中的所有样式表或静态资产.

I have an error when i run it on node server.js. The error reads:

Refused to apply style from 'http://localhost:3000/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

This is the code for node in the server.js file:

 

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");
})


This is the code for styling , the `css file : style.css` :

.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; }


This is the `html file : adddpatient.html`

<!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>

解决方案

create a public folder and in server.js make entry

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

put your css file inside that public folder. serve all the style-sheets or static assets from that folder only.

这篇关于Chrome 控制台错误:拒绝应用样式，因为其 MIME 类型 ('text/html')的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

登录 关闭

扫码关注1秒登录