Chrome dit "Ressource interprétée comme script mais transférée avec du texte de type MIME / plain.", Qu'est-ce qui donne?

316

Dans FF et tout, mon javascript fonctionne très bien. Mais dans Chrome, il donne ce message:

Ressource interprétée comme script mais transférée avec du texte de type MIME / plain.

J'ai vérifié toutes les balises de script et elles ont toutes le MIME type="text/javascript". Il le dit même avec jquery et jquery ui. Quel est le problème avec Chrome?

Quel est le problème et la solution? Est-ce quelque chose que je dois changer dans les «options» du navigateur ou est-ce à partir du serveur, ou dois-je modifier mon code?

Shaoz
la source
14
Un code serait utile. Ne blâmez jamais le compilateur (navigateur) en premier, peu importe à quel point il est tentant, car vous vous tromperez presque toujours.
msw
par curiosité, utilisez-vous html5?
bollo

Réponses:

203

Cela signifie que le serveur envoie une réponse HTTP Javascript avec

Content-Type: text/plain

Vous devez configurer le serveur pour envoyer une réponse JavaScript avec

Content-Type: application/javascript
SLaks
la source
3
J'utilise Weblogic Server 11g, mais je ne sais pas où je peux y configurer le MIME. S'il vous plaît, pouvez-vous me montrer le chemin?
Shaoz
6
Hmm qu'en est-il quand il n'y a pas de serveur, mais le script est en fait un fichier JSONP sur votre système de fichiers local? J'imagine alors simplement ignorer l'avertissement car ce n'est pas grave et échappe à votre contrôle?
hippietrail
2
Il devrait être content-type:application/javascriptcependant, application/x-javascriptn'est pas une norme RFC ou ECMAScript.
Jasdeep Khalsa
Il existe de nombreuses questions similaires. Cette réponse était une solution facile pour moi: stackoverflow.com/a/12057490/1617395
Joe Leo
@JoeLeo: C'est pour IIS.
SLaks
124

Cela n'a rien à voir avec jQuery ou toute bizarrerie de code de script côté client. Il s'agit d'un problème côté serveur : le serveur (application côté) n'envoie pas la valeur de Content-Typechamp d'en-tête HTTP attendue pour la ressource de script côté client. Cela se produit si le serveur Web est insuffisamment configuré, mal configuré ou si une application côté serveur (par exemple, PHP) génère la ressource de script côté client.

Les types de média MIME appropriés pour les implémentations ECMAScript comme JavaScript incluent:

  • text/javascript(enregistré comme obsolète , non obsolète, mais toujours valide et mieux pris en charge )
  • text/ecmascript(enregistré comme obsolète , non obsolète, mais toujours valide )
  • application/javascript
  • application/ecmascript

Ils ne pas comprennent application/x-javascript, comme les types de support MIME listés ci - dessus sont ceux enregistrés dans l'arborescence des normes maintenant (il n'y a donc pas besoin, et il ne devrait pas besoin, d'utiliser les plus expérimentales). Cf. RFC 4329, "Scripting Media Types" (2005 CE) et mon scénario de test: prise en charge des scripts de types de supports .

Une solution consiste à configurer le serveur si possible, comme déjà recommandé. Pour Apache, cela peut être aussi simple que d'ajouter la directive

AddType text/javascript .js

(voir la documentation Apache HTTP Server pour plus de détails).

Mais si la ressource de script côté client est générée par une application côté serveur, comme PHP, il est nécessaire de définir Content-Typeexplicitement la valeur du champ d'en-tête, car la valeur par défaut est probable text/html:

<?php
  header('Content-Type: text/javascript; charset=UTF-8');
  // ...
?>

(Cela et des instructions similaires doivent précéder toute autre sortie - voir le manuel PHP -, sinon le corps du message HTTP est considéré comme ayant déjà commencé et il est trop tard pour envoyer plus de champs d'en-tête.)

La génération côté serveur peut arriver facilement à une ressource de script côté client même si vous avez des fichiers .js simples sur le serveur, si les commentaires leur sont supprimés lorsqu'ils sont servis, s'ils sont tous regroupés dans une seule grande réponse (pour réduire la nombre de requêtes, qui peut être plus efficace), ou elles sont minimisées par l’application côté serveur de toute autre manière.

Oreilles pointues
la source
1
Et si nous n'avons pas accès au serveur?
Adonis K. Kakoulidis
1
Trouvez quelqu'un qui l'a fait.
PointedEars
Merci beaucoup pour cette explication. Beaucoup trop de gens disent quelque chose de prétentieux comme «envoyez simplement un enfant JSONP, vous devriez savoir comment le faire». Lorsque le temps est pris pour bien l'expliquer comme vous l'avez fait, c'est clair comme le jour. Cela a résolu un problème que j'avais depuis plusieurs semaines. Merci encore!
@ Rick-777: Je n'apprécie pas que vous changiez ma réponse sans même commenter votre changement. Si vous lisez attentivement ma réponse, vous comprenez pourquoi je recommande text/javascriptplus application/javascript. Si vous avez des raisons de croire que application/javascriptc'est la meilleure réponse maintenant, alors le moins que vous devriez faire est de vous expliquer dans un commentaire. Il est inapproprié qu'il nécessite le mécanisme de notification de Stack Overflow pour que je prenne connaissance de vos modifications. J'ai rétabli vos modifications, que j'appelle dupes , aux réponses à cette question lorsque je les juge inappropriées.
PointedEars
19

Pour les serveurs d'applications Java tels que Weblogic

1) Assurez-vous que votre fichier weblogic.xml est exempt d'erreurs

comme celui-ci:

    <?xml version = '1.0' encoding = 'windows-1252'?>
<weblogic-web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                  xsi:schemaLocation="http://www.bea.com/ns/weblogic/weblogic-web-app http://www.bea.com/ns/weblogic/weblogic-web-app/1.0/weblogic-web-app.xsd"
                  xmlns="http://www.bea.com/ns/weblogic/weblogic-web-app">
    <container-descriptor>
        <prefer-web-inf-classes>true</prefer-web-inf-classes>
    </container-descriptor>
    <context-root>MyWebApp</context-root>
</weblogic-web-app>

2) Ajoutez un type mime pour javascript à votre fichier web.xml :

    ...
        </servlet-mapping>

        <mime-mapping>    
            <extension>js</extension>        
            <mime-type>application/javascript</mime-type>        
        </mime-mapping>

        <welcome-file-list>
    ...

Cela fonctionnera également pour d'autres conteneurs Java - Tomcat etc. application/javascriptest actuellement le seul type MIME valide; d'autres comme text/javascriptont été dépréciés.

3) Vous devrez peut-être vider le cache de votre navigateur ou appuyer sur CTRL-F5

egallardo
la source
7

J'ai eu ce problème et j'ai compris comment le résoudre.

Cela se produit lorsque le fichier de style (CSS) est dans un codage différent du fichier PHP qui fait référence au fichier .css

Par exemple, l'utilisation de jQuery.js dans l'encodage Unix et l'utilisation d'index.php dans UTF-8 entraîneront ce problème, vous devez donc les rendre à la fois UTF-8 ou tout autre encodage tant qu'il est le même.

mak
la source
7

Si vous générez votre javascript avec un fichier php, ajoutez ceci comme début de votre fichier:

<?php Header("Content-Type: application/x-javascript; charset=UTF-8"); ?>
mopsyd
la source
Si vous avez défini un en-tête différent, remplacez-le afin de ne pas obtenir d'erreur.
mopsyd
1
Avec le post de PointedEars, cela m'a aidé à résoudre un problème qui, apparemment, n'avait pas de réponse et je me suis effondré depuis des semaines. Merci beaucoup: D Pourquoi est-ce quand je tape dans google "comment définir les en-têtes dans le document PHP" j'obtiens 1000 résultats erronés qui ne me disent rien sur la façon de le faire je ne sais pas, mais j'ai finalement trouvé votre message lol
3

Dans le httpd.conf de votre apache, ajoutez simplement une telle ligne:

AddType application/x-javascript .js
Ruslan Abuzant
la source
Mon entrée " .js" avait "application / javascript" sous les types MIME IIS 8. Lorsque j'ai changé l' entrée " .js" en "application / x-javascript", cela a fonctionné! Cela provient d'une application ExtJS / ASP.NET / ExtDirect4DotNet
MacGyver
3

J'ai reçu ce message de débogage pour une raison plus idiote que les autres réponses ici: il s'agit du message d'erreur reçu lorsque vous n'obtenez pas suffisamment de sommeil et référencez un fichier js en utilisant la syntaxe d'un fichier css. Un péché,

<link rel='stylesheet' type='text/css' href='clearly_javascript.js'/>

plutôt que

<script src='clearly_javascript.js'></script>

Je pensais que je mettrais cela ici parce que c'est le premier message qui apparaît lors de la recherche du message d'erreur.

Robert Townley
la source
2

Problème étrange, mais cela m'a aidé à résoudre mon problème. Parfois, même les choses les plus faciles sont difficiles à comprendre ...

Au lieu d'utiliser /js/main.cssdans mon script-tag, j'ai utiliséjs/main.css

OUI , cela a réellement fait une différence. Je suis assis sur WAMP / Windows et je n'avais pas de vhost mais juste utilisélocalhost/<project>

Si je fais référence à, /js/main.cssje fais référence à localhost/css/main.csset non àlocalhost/<project>/css/main.css

Quand on y pense, c'est assez évident, mais si quelqu'un bute dessus, je pensais partager cette réponse.

bestprogrammerintheworld
la source
1

Vérifiez que vos fichiers js existent réellement sur le serveur. J'ai eu ce problème et j'ai découvert que les fichiers js n'avaient pas été téléchargés sur le serveur et que le serveur renvoyait en fait la page html - qui était le document par défaut configuré sur le serveur (par exemple default.html)

Steve Mc
la source
1

Si vous travaillez sur Joomla! et obtenir cette erreur gênante lorsque vous essayez d'inclure un .jsfichier JavaScript ( ), alors la solution suivante est pour vous.

Le problème le plus probable est que vous essayez d'inclure un .js fichier qui n'est pas là , ou que vous venez de perdre ce .jsfichier, et quand Joomla! ne trouve pas de ressource, puis au lieu du message générique 404, il renvoie un message 404 à part entière avec une page Web complète et du HTML, etc.

Le navigateur Web l'interprète comme s'il s'agissait .jssimplement d'une page Web indiquant que le fichier requis n'a pas été trouvé .

Cela peut fonctionner pour

Mohd Abdul Mujib
la source
1

Pour moi, cela ne s'est produit que sur certaines pages car j'ai utilisé à la window.locationplace de $location.url(...);Cela a résolu mon problème. Il a fallu un certain temps pour comprendre :)

tfa
la source
0

J'ai eu ce problème lors de l'utilisation d'un framework Web et l'ai résolu en déplaçant les fichiers javascript appropriés dans le dossier javascript désigné (par le framework).

JJ.
la source
0

Une chose courante lorsque cela se produit est que vous avez simplement oublié d'inclure le typedans vos appels de script. Vous devrez le définir explicitement, car il est - selon W3 - requis :

type(type de contenu): cet attribut spécifie le langage de script du contenu de l'élément et remplace le langage de script par défaut. Le langage de script est spécifié en tant que type de contenu (par exemple, "text/javascript"). Les auteurs doivent fournir une valeur pour cet attribut. Il n'y a pas de valeur par défaut pour cet attribut.

Il semble cependant que les navigateurs aient une valeur par défaut de plain/text.

Exemple:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>

Vous pouvez également définir une valeur par défaut pour cette extension de fichier dans votre configuration Apache:

<IfModule mod_mime.c>
    AddType text/javascript .js
</IfModule>
kaiser
la source
0

Si son IIS assurez-vous que sous votre common HTTP Featuresvous avez Static Contentallumé

varun
la source
0

J'ai eu la même erreur et finalement (dans mon cas particulier) j'ai trouvé un problème dans le descripteur de déploiement (web.xml)

Le problème:

<servlet-mapping>
    <servlet-name>SessionController</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>
...
<welcome-file-list>
    <welcome-file>/</welcome-file>
</welcome-file-list>

la solution:

<servlet-mapping>
    <servlet-name>SessionController</servlet-name>
    <url-pattern>/SessionController</url-pattern>
</servlet-mapping>
...
<welcome-file-list>
    <welcome-file>desktop.jsp</welcome-file>
</welcome-file-list>
Daniel Kennedy
la source
0

Si vous utilisez Spring MVC, vous pouvez ajouter la balise mvn suivante pour exclure le fichier de ressources du servlet Spring Dispatch

<mvc:resources mapping="/js/*.js" location="/js/"/>
<mvc:resources mapping="/css/*.css" location="/css/"/>
<mvc:resources mapping="/images/*.*" location="/images/"/>
sendon1982
la source
0

Dans mon cas, le serveur envoyait le bon Content-Typemais avec un incorrect Content-Encoding. Assurez-vous que vous ne définissez que Content-Encoding: gzippour les ressources gzippées. De plus, après avoir corrigé les en-têtes sur le serveur (dans mon cas, Google Cloud Storage), j'ai dû attendre quelques minutes pour refléter correctement les changements dus à la mise en cache.

falsarella
la source
0

Si vous utilisez AdonisJS (API REST, par exemple), une façon d'éviter cela est de définir l'en-tête de réponse de cette façon:

response.safeHeader('Content-type', 'application/json')
Billal Begueradj
la source
-1

J'avais le même problème lorsque j'essayais de changer une image d'arrière-plan dans un tableau via javascript (jQuery dans ce cas).

En tous cas.

Au lieu de cela:

m.setStyle('background-image','url(/templates/site/images/style5/'+backgs[i]+')')

faites ceci:

eval("m.setStyle('background-image','url(/templates/site/images/style5/'+backgs[i]+')')");

Le javascript de Chrome est vissé lorsque vous essayez d'analyser une variable à l'intérieur d'un élément structuré avec '. Dans mon cas, il s'est arrêté juste avant l'insertion du tableau d'images. Au lieu d'analyser l'URL de l'image + le nom de l'image (à l'intérieur du tableau), il analysait uniquement l'URL de l'image.

Vous devrez probablement rechercher dans le code et voir où cela se produit. FF, IE et tous les autres n'ont pas ce problème.

Marco G.
la source
4
N'utilisez pas evalsi vous pouvez l'aider: javascripttoolbox.com/bestpractices/#eval
indra
-1

La réponse publiée ici par simon-sarris m'a aidé.

Cela m'a aidé à résoudre mon problème.

Le programme d'installation de Visual Studio doit avoir ajouté une ligne errante au Registre.

ouvrez regedit et jetez un œil à cette clé de registre:

entrez la description de l'image ici

Vous voyez cette clé? La clé de type de contenu? changez sa valeur de text / plain en text / javascript.

Enfin, le chrome peut à nouveau respirer facilement.

Je dois noter que ni Content Type ni PercievedType ne sont là par défaut sur Windows 7, vous pouvez donc probablement les supprimer tous les deux en toute sécurité, mais le minimum que vous devez faire est cette modification.

Quoi qu'il en soit, j'espère que cela le corrige pour vous aussi!

N'oubliez pas de redémarrer votre système après les modifications.

faux
la source
Salut simulacre. Le plagiat est mauvais. (mmmmkay?) J'ai édité votre réponse pour éliminer le plagiat conformément aux directives SO .
Samuel Harmer