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

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

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

Solution 2:

This type of warnings are usually flagged because of the request HTTP headers. Specifically the Accept request header. The MDN documentation for HTTP headers states

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 is probably not on the list of MIME types in the Accept header sent by the browser hence the warning.

Solution

Custom HTTP headers can only be sent programmatically via XMLHttpRequest or any of the js library wrappers implementing it.