The console of Chrome error : Refused to apply style because its MIME type ('text/html')
Question
I have an error when i run it on node server.js. The error says
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 server.js file , the css file : style.css and the html file : 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 answers
solution1
1 ACCPTED 2019-03-03 13:15:06
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Refused to apply style from {filename} because its MIME type ('text/html') is not a supported stylesheet MIME type
Django: Refused to apply style from ... because its MIME type ('text/html') is not a supported stylesheet MIME type
Refused to apply style because its MIME type ('text/html') is not a supported stylesheet MIME type
Refused to apply style because its MIME type ('text/html') is not a supported stylesheet type
Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled
Refused to apply style from 'xxx/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type
Angular error when applying css style: Refused to apply style from 'path' because its MIME type ('text/html') is not a supported stylesheet MIME type
Refused to apply style from 'http://localhost:2000/cssFile/style.css' because its MIME type ('text/html')
Refused to apply style from... because its MIME type ('text/html') is not a supported style-sheet MIME type, and strict MIME checking is enabled
Refused to apply style from 'http://localhost:3000/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type
Related Tags