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    lt form enctype  multipart form-data  id  name change form  method  post  action   my account   gt    lt div style  display none  gt  lt input type  hidden  name  csrfmiddlewaretoken  value  6c9b552aaba88b8442077e2957e69303    gt  lt  div gt      lt table gt        lt tr gt          lt td gt            lt label for  id first name  gt First name lt  label gt          lt  td gt          lt td gt            lt input name  first name  value  Patrick  maxlength  30  type  text  id  id first name  size  30    gt          lt  td gt        lt  tr gt        lt tr gt          lt td gt            lt label for  id last name  gt Last name lt  label gt          lt  td gt          lt td gt            lt input name  last name  value  Sung  maxlength  30  type  text  id  id last name  size  30    gt          lt  td gt        lt  tr gt      lt  table gt      lt input type  hidden  name  form id  value  name change form    gt    lt  form gt     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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to jquery

Examples related to google-chrome-devtools

Examples related to jquery-forms-plugin