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

Banjermasin

It was my intention to have the server return response in json. I guess I need to make the browser to realize that it should interpret the response in json. If my guess is correct, how should I do that? – Banjermasin

Related: Chrome says "Resource interpreted as script but transferred with MIME type text/plain.", what gives? – Exon

Answer 1

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

Banjermasin

Answer 2

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.

Sober

@quangtruong1985 - response = HttpResponse("Text only, please.", mimetype="text/html") – Banjermasin

I was pulling my hair for more than 30 minutes. Thanks for the solution. – Milzie

I disagree. The content type header should match the actual content otherwise you risk clients misbehaving. If you are sending a JSON response, it makes no sense to set the content-type to text/html. Your client needs to send the correct Accepts header as detailed in another answer – Tyre

Answer 3

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.

Loden

This is the most correct and informative answer. I was wondering why this was happening to me when navigating to JSON API endpoints directly in my browser. – Tyre

Answer 4

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

Bicephalous

Answer 5

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

Corey

Answer 6

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

Mitis

Answer 7

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

Strung