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

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? — tamakisquare, Aug 03 '11 at 23:17
Related: [Chrome says "Resource interpreted as script but transferred with MIME type text/plain.", what gives?](http://stackoverflow.com/q/3467404) — blahdiblah, Mar 27 '13 at 23:46

score 21 · Answer 1 · edited Jul 21 '13 at 23:10

21

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.

edited Jul 21 '13 at 23:10

Timo Tijhof

10,032
6
34
48

answered Aug 13 '11 at 21:01

HB.

259
1
4

@quangtruong1985 - `response = HttpResponse("Text only, please.", mimetype="text/html")` – tamakisquare Sep 20 '11 at 18:38
I was pulling my hair for more than 30 minutes. Thanks for the solution. – Tariqulazam Jun 15 '17 at 23:42
6

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](https://stackoverflow.com/a/44249566/2116253) – Phil Oct 18 '17 at 07:52

score 16 · Answer 2 · answered May 29 '17 at 19:51

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.

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. — Phil, Oct 18 '17 at 07:01

score 7 · Answer 3 · edited Oct 06 '17 at 17:31

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

score 2 · Accepted Answer · answered Aug 16 '11 at 17:15

2

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

answered Aug 16 '11 at 17:15

tamakisquare

16,659
26
88
129

score 1 · Answer 5 · answered Sep 29 '13 at 11:05

1

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

answered Sep 29 '13 at 11:05

daviddv

177
7

score 0 · Answer 6 · answered Sep 27 '12 at 15:40

0

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

answered Sep 27 '12 at 15:40

driftcrow

217
1
5

score -2 · Answer 7 · answered Jan 15 '13 at 07:40

-2

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

answered Jan 15 '13 at 07:40

Roland Kákonyi

583
4
12

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

7 Answers7

Linked