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.

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

Answer 3

It's actually a quirk in Chrome, not the JavaScript library. Here's the fix:

To prevent the message appearing and also allow chrome to render the response nicely as JSON in the console, append a query string to your request URL.

e.g

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 4

I took a different approach. I switched to use $.post and the error has gone since then.

Answer 5

This happened to me, and once I removed this: enctype="multipart/form-data" It started working without the warning

Answer 6

you can simply use JSON.stringify(options) convert JSON object to string before submit, then warning dismiss and works fine

Answer 7

Use dataType: "jsonp". I had the same error before. It fixed for me.