web-dev-qa-db-fra.com

Fichier CSS bloqué: non-concordance de type MIME (X-Content-Type-Options: nosniff)

Je développe une application Angular 4 et je souhaite appliquer des styles globaux. En suivant le tutoriel sur le site angular site , je 'ai créé un fichier "styles.css" dans le répertoire racine de mon application, et je fais référence à cette feuille de style dans l'index.html de mon application:

<link rel="stylesheet" type="text/css" href="styles.css">

L'application angular est compilée avec succès:

$ ng serve 
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
[...]
webpack: Compiled successfully.

Mais lorsque je visite http: // localhost: 42 dans un navigateur Chromium, la console affiche une erreur à

GET http://localhost:4200/styles.css

Dans un navigateur Firefox, l'erreur est un peu plus explicite:

GET 
http://localhost:4200/styles.css [HTTP/1.1 404 Not Found 15ms]
The resource from "http://localhost:4200/styles.css" was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

Les deux fichiers, index.html et styles.css sont situés dans le répertoire racine de mon angular. J'ai essayé d'obtenir plus d'informations sur le problème :

nosniff
    Blocks a request if the requested type is

        "style" and the MIME type is not "text/css", or
        "script" and the MIME type is not a JavaScript MIME type.

Mais je ne comprends pas pourquoi cela bloque la demande, car j'ai spécifié type="text/css" lors du référencement de la feuille de style.

cssnode.jsangularexpressmime-types
9
rodrunner

Je suis juste tombé sur le même problème. Cela semble être une bizarrerie de Express qui peut se manifester pour plusieurs raisons différentes, à en juger par le nombre de résultats de la recherche sur le Web pour "nodejs express css mime type".

Malgré la type="text/css" attribut que nous mettons dans notre <link éléments, Express renvoie le fichier CSS comme

Content-Type: "text/html; charset=utf-8"

alors qu'il devrait vraiment le retourner comme

Content-Type: "text/css"

Pour moi, la solution rapide et sale consistait simplement à supprimer le rel= attribut, c'est-à-dire changement

<link rel="stylesheet" type="text/css" href="styles.css">

à

<link type="text/css" href="styles.css">

Les tests ont confirmé que le fichier CSS avait été téléchargé et que les styles fonctionnaient réellement, et c'était assez bon pour mes besoins.

13
Gord Thompson

J'ai également supprimé rel = "stylesheet", et je ne reçois plus l'erreur de type MIME, mais les styles ne sont pas chargés

4
Fer Cervantes

En rencontrant le même type de problème pour une application Web à pile complète (en développement), j'ai simplement résolu le problème en liant correctement le fichier css à la page rendue. Suppression du rel = stylesheet, comme suggéré ci-dessus, empêche l'erreur de s'afficher dans le navigateur mais ne charge pas les styles à appliquer à la page. Bref, ce n'est pas une solution.

Si vous utilisez express-static vous pouvez utiliser ceci comme exemple:

Côté serveur:

app.use(express.static(__dirname + "/public", {
    index: false, 
    immutable: true, 
    cacheControl: true,
    maxAge: "30d"
}));

Côté client:

 <link type="text/css" rel="stylesheet" href="/main.css">

Ajoutez simplement une barre oblique devant le fichier que vous souhaitez lier à la page html (si vous affichez des pages html sans utiliser de template engines) et express-static feront le reste automatiquement pour vous.

2
rags2riches

Certaines réponses ont suggéré de supprimer rel = "stylesheet", mais cela n'a pas fonctionné pour moi. Selon la documentation expressjs: https://expressjs.com/en/starter/static-files.html use express.static fonction pour servir des fichiers statiques tels que CSS, JavaScript, etc ...

app.use(express.static('public'))

et à partir de là, vous devriez pouvoir charger n'importe quel fichier dans le répertoire public par exemple, si vous avez un fichier style.css dans le répertoire {PROJECT_PATH}/public/css/

http://localhost:3000/css/style.css marchera.

1
Mohyddin

Dans mon cas, j'avais mélangé les blocs de code ci-dessous dans l'ordre inverse, donc j'obtenais cette erreur. Si vous rencontrez ce problème, suivez l'ordre ci-dessous et cela pourrait vous aider

1.

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

2.

app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, 'public/index.html'));
});

3.

app.use('/api', cors(corsOptions), indexRouter);
0
sudeep123

Nous avons rencontré un problème similaire avec un fichier javascript (par opposition à css) dans une application Angular. En réalité, le problème ne venait pas du type MIME (comme l'indiquait le message d'erreur externe) mais était finalement une erreur "404 Not Found".

Dans mon cas, mettre le fichier de script n'importe où mais dans le dossier "assets" a entraîné le 404 et finalement l'erreur de type mime. La balise suivante a fonctionné pour moi dans la section head de index.html:

<script src="assets/plugins/jquery.min.js" type="text/javascript"></script>

Le dossier des ressources est un frère du fichier Index.html.

0
DaveIIi