Refus d'appliquer le style de "http: // localhost: 3000 / style.css" car son type MIME ("text / html") [fermé]

Dec 20 2020

J'ai cette erreur lorsque j'exécute mon application JS client-serveur

ERREUR DE CONSOLE DANS DevTools:

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.

CODE CLIENT:

const postData = async ( url = '', data = {})=>{
console.log(data);
const response = await fetch(url, {
  method: 'POST', 
  credentials: 'same-origin',
  headers: {
      'Content-Type': 'application/json',
  },
 // Body data type must match "Content-Type" header        
  body: JSON.stringify(data), 
});

  try {
    const newData = await response.json();
    console.log(newData);
    return newData;
  }catch(error) {
  console.log("error", error);
  }
 }

postData('/addMovie', {answer:42});

CODE SERVEUR:

const express = require('express')
const bodyParser = require('body-parser');
const app = express()

app.use(bodyParser.urlencoded({extended : false}));
app.use(bodyParser.json());

const cors = require('cors');
app.use(cors());
app.use(express.static('website'))

const port = 3000
app.listen(port, getServerPortInfo)
function getServerPortInfo() {
    console.log("Server listening at port " + port)
}

const data = []
app.post('/addMovie', addMovie)

function addMovie (req, res){
    console.log(req.body)
    console.log("here")
    data.push(req.body)
    console.log(data)
    res.send(data)

 }

FICHIER HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Weather Journal</title>
    <link href="https://fonts.googleapis.com/css?family=Oswald:400,600,700|Ranga:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>    
    <div>
        <button id="generate" type = "submit"> Generate </button>
    </div>
    <script src="app.js" type="text/javascript"></script>
</body>
</html>

Pourriez-vous s'il vous plaît fournir des liens, des conseils ou des pointeurs qui pourraient m'aider à trouver une solution?

La chose étrange est que je n'ai pas de fichier css.

Veuillez noter que j'ai déjà parcouru ce post et que cela n'a pas aidé mon cas: Erreur de la console de Chrome: Refusé d'appliquer le style car son type MIME ('text / html')

Réponses

1 Wyck Dec 20 2020 at 08:15

Vous avez spécifié:

<link rel="stylesheet" href="style.css">

Mais vous n'avez pas de fichier style.css . La demande de http://localhost:3000/style.cssa abouti à une erreur 404 et votre serveur a envoyé une réponse HTML (le type MIME est text/html). L'erreur dit tout:

Refus d'appliquer le style à partir de « http://localhost:3000/style.css» car son type MIME («text / html») n'est pas un type MIME de feuille de style pris en charge et la vérification MIME stricte est activée.

Pour corriger le problème, créez un lien vers le fichier style.css réel avec une URL complète ou supprimez entièrement le lien de la feuille de style si aucune ressource style.css n'existe nulle part.

Zahid Dec 20 2020 at 08:21

Vous devrez explicitement indiquer à votre application express de considérer le dossier comme statique pour conserver le type mime du fichier.

Quelque chose comme:

app.use(express.static("./"));