jquery - official - Recurso interpretado como Documento pero transferido con la aplicación de tipo MIME/advertencia json en Herramientas de desarrollo de Chrome

jquery version

Question

Tengo el siguiente fragmento, que usa el complemento jQuery Form para publicar un formulario en el servidor (en ajax).

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

  $form.ajaxSubmit(options);

La forma:

<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> 

La implementación de Ajax está funcionando bien. Pero estoy recibiendo una advertencia

Recurso interpretado como Documento pero transferido con aplicación tipo MIME / json

en las herramientas para desarrolladores de Chrome Quiero averiguar por qué la advertencia, o mejor aún, una forma de resolverlo.

Cambié para usar $.post y mágicamente el error desapareció desde entonces. No tengo idea de por qué funciona $.post pero no $form.ajaxSubmit . Si alguien puede ofrecer su explicación, sería genial. Por lo menos, este problema está resuelto. A continuación está el nuevo código.

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

Answer 1

En realidad, es una peculiaridad en Chrome, no en la biblioteca de JavaScript. Aquí está la solución:

Para evitar que aparezca el mensaje y permitir que Chrome muestre la respuesta como JSON en la consola, agregue una cadena de consulta a su URL de solicitud.

p.ej

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);

Answer 2

Estaba enfrentando el mismo error. La solución que funcionó para mí es:

Desde el extremo del servidor, al devolver la respuesta JSON, cambie el tipo de contenido: text / html

Ahora los navegadores (Chrome, Firefox e IE8) no dan un error.

Answer 3

Este tipo de advertencias generalmente se marcan debido a los encabezados HTTP de solicitud. Específicamente, el encabezado de solicitud de aceptación. La documentación de MDN para los estados de encabezados 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....

Es probable que application / json no esté en la lista de tipos MIME en el encabezado Accept enviado por el navegador, de ahí la advertencia.

Solución

Los encabezados HTTP personalizados solo pueden enviarse mediante programación mediante XMLHttpRequest o cualquiera de los contenedores de biblioteca js que lo implementan.

Answer 4

Esto me pasó a mí, y una vez que eliminé esto: enctype = "multipart / form-data" Comenzó a funcionar sin la advertencia

Answer 5

Tomé un enfoque diferente. Cambié para usar $ .post y el error se ha ido desde entonces.

Answer 6

Use dataType: "jsonp" . Tuve el mismo error antes. Me arregló

Answer 7

simplemente puede usar JSON.stringify (opciones) convertir el objeto JSON en una cadena antes de enviar, luego rechazar la advertencia y funciona bien