Resource interpreted as Document but transferred with MIME type application/json warning in Chrome Developer Tools

Question

I have the following snippet, which uses the jQuery Form plugin to post a form to the server (in ajax).

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

The form:

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

The ajax implementation is working fine. But I am getting a warning

Resource interpreted as Document but transferred with MIME type application/json

in Chrome Developer Tools. I want to find out why the warning, or even better, a way to resolve it.

I changed to use $.post instead and magically the error was gone since then. I have no idea why $.post works but not $form.ajaxSubmit. If someone can offer their explanation that would be great. At the very least, this problem is resolved. Below is the new code.

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

Answer 1

I was facing the same error. The solution that worked for me is:

From the server end, while returning JSON response, change the content-type: text/html

Now the browsers (Chrome, Firefox and IE8) do not give an error.