堆棧內存溢出
  簡體   English   中英

Chrome的控制台錯誤：拒絕應用樣式，因為其MIME類型（'text / html'）

[英]The console of Chrome error : Refused to apply style because its MIME type ('text/html')

 原文  2019-03-03 12:16:42  1   1    javascript/ html/ css

問題描述

在節點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>

1 個解決方案

解決方案1
 1 已采納  2019-03-03 13:15:06

創建一個公共文件夾並在server.js中進行輸入 

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

將您的css文件放在該公用文件夾中。 僅提供該文件夾中的所有樣式表或靜態資源。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 拒絕應用{filename}中的樣式，因為它的MIME類型（&#39;text / html&#39;）不是受支持的樣式表MIME類型 Django：拒絕從...應用樣式，因為它的 MIME 類型（&#39;text/html&#39;）不是受支持的樣式表 MIME 類型 拒絕應用樣式，因為它的 MIME 類型 ('text/html') 不是受支持的樣式表 MIME 類型 拒絕應用樣式，因為它的 MIME 類型（'text/html'）不是受支持的樣式表類型 拒絕應用“ <URL> &#39;，因為它的MIME類型（&#39;text / html&#39;）不是受支持的樣式表MIME類型，並且啟用了嚴格的MIME檢查 拒絕應用來自“xxx/style.css”的樣式，因為它的 MIME 類型（“text/html”）不是受支持的樣式表 MIME 類型 應用 css 樣式時出現角度錯誤：拒絕從“路徑”應用樣式，因為其 MIME 類型（“文本/html”）不是受支持的樣式表 MIME 類型 拒絕應用來自 'http://localhost:2000/cssFile/style.css' 的樣式，因為它的 MIME 類型（'text/html'） 拒絕從...應用樣式，因為它的 MIME 類型 (&#39;text/html&#39;) 不是受支持的樣式表 MIME 類型，並且啟用了嚴格的 MIME 檢查 拒絕應用來自 'http://localhost:3000/css/style.css' 的樣式，因為它的 MIME 類型 ('text/html') 不是受支持的樣式表 MIME 類型
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM