web-dev-qa-db-fra.com

Ressource interprétée comme Document mais transférée avec une application de type MIME / avertissement json dans Chrome Developer Tools

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:

<form enctype="multipart/form-data" id="name_change_form" method="post" action="/my_account/"> 
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='6c9b552aaba88b8442077e2957e69303' /></div> 
  <table> 
    <tr> 
      <td> 
        <label for="id_first_name">First name</label>:
      </td> 
      <td> 
        <input name="first_name" value="Patrick" maxlength="30" type="text" id="id_first_name" size="30" /> 
      </td> 
    </tr> 
    <tr> 
      <td> 
        <label for="id_last_name">Last name</label>:
      </td> 
      <td> 
        <input name="last_name" value="Sung" maxlength="30" type="text" id="id_last_name" size="30" /> 
      </td> 
    </tr> 
  </table> 
  <input type="hidden" name="form_id" value="name_change_form" /> 
</form>

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

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

dans Chrome Developer Tools. Je veux savoir pourquoi l'avertissement, ou mieux encore, un moyen de le résoudre.

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

var url = $form.attr("action");
$.post(
  url, 
  $form.serialize(), 
  function(data) {
    alert("success");
  },
  "json"
);
jquerygoogle-chrome-devtoolsjquery-forms-plugin
41
tamakisquare

J'ai adopté une approche différente. J'ai changé pour utiliser $ .post et l'erreur a disparu depuis lors.

2
tamakisquare

J'étais confronté à la même erreur. La solution qui a fonctionné pour moi est:

Du côté du serveur, tout en renvoyant la réponse JSON, changez le type de contenu: text/html

Désormais, les navigateurs (Chrome, Firefox et IE8) ne donnent pas d'erreur.

20
HB.

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

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 que par programme via XMLHttpRequest ou l'un des wrappers de bibliothèque js qui l'implémentent.

10
Kudehinbu Oluwaponle

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

Pour éviter que le message n'apparaisse et permettre également à chrome de restituer la réponse sous forme de 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);
4
John

Cela m'est arrivé, et une fois que j'ai supprimé cela: enctype = "multipart/form-data" Il a commencé à fonctionner sans avertissement

1
daviddv

vous pouvez simplement utiliser JSON.stringify (options) convertir l'objet JSON en chaîne avant de le soumettre, puis avertir le rejet et fonctionner correctement

0
driftcrow