Ressource interprétée comme Document mais transférée avec un avertissement de type MIME application / json dans les outils de développement Chrome

J’ai l’extrait suivant, qui utilise le plugin jQuery Form pour publier un formulaire sur le serveur (en ajax).

var options = { dataType: "json", success: function(data) { alert("success"); } }; $form.ajaxSubmit(options); 

La forme:

 
:
:

L’implémentation ajax fonctionne bien. Mais je reçois un avertissement

Ressource interprétée comme Document mais transférée avec l’application de type MIME / json

dans Chrome Developer Tools. Je veux savoir pourquoi l’avertissement, ou même mieux, est un moyen de le résoudre.

J’ai changé pour utiliser $.post place et par magie, l’erreur a disparu depuis. Je ne sais pas pourquoi $.post fonctionne mais pas $form.ajaxSubmit . Si quelqu’un peut offrir son explication, ce serait formidable. Au minimum, ce problème est résolu. Voici le nouveau code.

 var url = $form.attr("action"); $.post( url, $form.serialize(), function(data) { alert("success"); }, "json" ); 

Je faisais face à la même erreur. La solution qui a fonctionné pour moi est la suivante:

À la fin du serveur, tout en renvoyant une réponse JSON, modifiez le type de contenu: text / html

Maintenant, les navigateurs (Chrome, Firefox et IE8) ne donnent pas d’erreur.

Ce type d’avertissement est généralement signalé en raison des en-têtes HTTP de la requête. Plus précisément, l’en-tête de demande Accept. La documentation MDN pour les états des en-têtes HTTP

The Accept request HTTP header advertises which content types, expressed as MIME types, the client is able to understand. Using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice with the Content-Type response header. Browsers set adequate values for this header depending of the context where the request is done....

application / json n’est probablement pas sur la liste des types MIME dans l’en-tête Accept envoyé par le navigateur, d’où l’avertissement.

Solution

Les en-têtes HTTP personnalisés ne peuvent être envoyés par programmation que via XMLHttpRequest ou l’un des wrappers de la bibliothèque js qui l’implémentent.

C’est en fait une bizarrerie dans Chrome, pas la bibliothèque JavaScript. Voici le correctif:

Pour empêcher le message d’apparaître et permettre également à chrome de générer correctement la réponse en tant que JSON dans la console, ajoutez une chaîne de requête à l’URL de votre demande.

par exemple

 var xhr_object = new XMLHttpRequest(); var url = 'mysite.com/'; // Using this one, Chrome throws error var url = 'mysite.com/?'; // Using this one, Chrome works xhr_object.open('POST', url, false); 

J’ai adopté une approche différente. Je suis passé à utiliser $ .post et l’erreur a disparu depuis.

Cela m’est arrivé, et une fois que j’ai supprimé ceci: enctype = “multipart / form-data” Il a commencé à fonctionner sans l’avertissement

vous pouvez simplement utiliser JSON.ssortingngify (options) pour convertir un object JSON en chaîne avant envoi, puis avertir ignorer et fonctionne correctement

Utilisez dataType: "jsonp" . J’ai eu la même erreur avant. Il a corrigé pour moi