Je développe une page Web à l'aide de JavaScript et HTML, tout fonctionnait bien lorsque j'ai reçu cette liste d'erreurs de ma page HTML:
The resource from “https://raw.githubusercontent.com/dataarts/dat.gui/master/build/dat.gui.min.js”
was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js” was
blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js”
was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/Projector.js”
was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js” was
blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
Ces erreurs sont apparues après une mise à jour automatique du navigateur (Mozilla Firefox), il se peut que quelque chose ait été modifié dans la configuration. Savez-vous un moyen de résoudre ce problème?
Vérifiez si le chemin du fichier est correct et que le fichier existe - dans mon cas, c'était le problème - lorsque je l'ai corrigé, l'erreur a disparu
Cela peut être corrigé en changeant votre URL, exemple mauvais:
https://raw.githubusercontent.com/svnpenn/bm/master/yt-dl/yt-dl.js
Content-Type: text/plain; charset=utf-8
Exemple bon:
https://cdn.rawgit.com/svnpenn/bm/master/yt-dl/yt-dl.js
content-type: application/javascript;charset=utf-8
rawgit.com est un service proxy de mise en cache pour github. Vous pouvez également y accéder et dériver interactivement une URL correspondante pour votre URL d'origine raw.githubusercontent.com . Voir son FAQ
vérifiez votre chemin, cette erreur viendra si le fichier n'existe pas dans le chemin donné.
Dans mon cas, je viens juste de rater la barre oblique "/" après get_template_directory_uri () de sorte que le chemin résultant/généré était incorrect:
Mon mauvais code:
wp_enqueue_script( 'retina-js', get_template_directory_uri().'js/retina.min.js' );
Mon code corrigé:
wp_enqueue_script( 'retina-js', get_template_directory_uri().'/js/retina.min.js' );
Nous avons commencé à faire face à cette erreur en production après que notre équipe de devops ait modifié la configuration du serveur Web en ajoutant X-Content-Type-Options: nosniff
. Maintenant, à cause de cela, le navigateur a été contraint d'interpréter les ressources comme indiqué dans le paramètre content-type
des en-têtes de réponse.
Maintenant, depuis le début, notre serveur d'applications définissait explicitement le type de contenu des fichiers js sous la forme text/plain
. Étant donné que X-Content-Type-Options: nosniff
n'était pas défini dans le serveur Web, le navigateur interprétait automatiquement les fichiers js en tant que fichiers JavaScript, bien que le type de contenu soit mentionné en tant que text/plain. Ceci s'appelle le reniflement MIME. Maintenant, après avoir défini X-Content-Type-Options: nosniff, le navigateur a été obligé de ne pas effectuer le reniflement MIME et de prendre le type de contenu comme indiqué dans les en-têtes de réponse. Pour cette raison, il a interprété les fichiers JS en tant que fichiers texte brut et a refusé de les exécuter ou les a bloqués. La même chose est montrée dans vos erreurs.
Solution: obliger votre serveur à définir le content-type
des fichiers JS comme
application/javascript;charset=utf-8
De cette façon, tous les fichiers JS seront chargés normalement et le problème sera résolu.
Cela peut être dû au fait que le navigateur ne peut pas accéder à un fichier. Je suis tombé sur ce type d'erreur lors de la création d'une application avec node.js. Vous pouvez essayer de demander directement le fichier de script (copier-coller d'URL) et voir si vous pouvez le récupérer. Vous pouvez alors voir quel est le véritable problème. Cela peut être dû à l’autorisation du dossier dans lequel se trouve le fichier, ou le navigateur ne peut tout simplement pas le trouver en raison d’un chemin incorrect. Dans node.js, après avoir spécifié la route vers le fichier, tout fonctionne.
Utilisez-vous express?
Vérifiez votre chemin (notez le "/
" après/public /):
app.use(express.static(__dirname + "/public/"));
// remarque: vous n'avez pas besoin du "/" avant "css" car il est déjà inclus ci-dessus:
rel="stylesheet" href="css/style.css
J'espère que cela t'aides
J'ai résolu ce problème en modifiant le jeu de caractères dans les fichiers js d'UTF-8 sans nomenclature à un simple UTF-8 dans Notepad ++.
Ce pourrait être un mauvais chemin. Assurez-vous d'avoir dans votre fichier principal de l'application:
app.use(express.static(path.join(__dirname,"public")));
Exemple de lien vers votre css en tant que:
<link href="/css/clean-blog.min.css" rel="stylesheet">
similaire pour le lien vers les fichiers js:
<script src="/js/clean-blog.min.js"></script>
Voir les protocoles HTTPS et HTTP
Parfois, si vous utilisez des protocoles mixtes [cela se produit principalement avec des rappels JSONP], vous pouvez vous retrouver dans cette ERREUR.
Assurez-vous que la page Web et la page de ressources utilisent les mêmes protocoles HTTP.