Chrome开发者工具中出现“资源被解释为文档，但使用了application/json MIME类型进行传输”的警告。

Question

我有以下代码片段，它使用jQuery Form插件将一个表单以ajax方式发送到服务器。

  var options = {
    dataType: "json",
    success: function(data) { 
      alert("success");
    } 
  }; 

  $form.ajaxSubmit(options);

Username:
Password:

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

ajax实现运作良好，但我收到一个警告：

Resource interpreted as Document but transferred with MIME type application/json

在Chrome开发者工具中。我想找出为什么会出现这个警告，或者更好的解决方法。

我改用$.post后奇迹般地没有错误了。我不知道为什么$.post可以而$form.ajaxSubmit不行。如果有人能提供解释那就太好了。至少，这个问题已经得到解决。以下是新代码。

var url = $form.attr("action");
$.post(
  url, 
  $form.serialize(), 
  function(data) {
    alert("success");
  },
  "json"
); 

- tamakisquare

---

我的意图是让服务器返回JSON响应。我想我需要让浏览器意识到它应该将响应解释为JSON。如果我猜对了，我该怎么做？ - tamakisquare

相关：Chrome报错“Resource interpreted as script but transferred with MIME type text/plain.”，是怎么回事？ - blahdiblah

Answer 1

我也遇到了相同的错误，解决方案如下:

在服务器返回JSON响应时，更改内容类型为：text/html

现在浏览器（Chrome、Firefox和IE8）不会再出现错误。

- HB.

---

@quangtruong1985 - response = HttpResponse("请只输入文本。", mimetype="text/html") - tamakisquare

我已经拔了30分钟的头发了，感谢您提供的解决方案。 - Tariqulazam

我不同意。内容类型头应该与实际内容匹配，否则会导致客户端行为异常。如果你发送的是JSON响应，将content-type设置为text/html毫无意义。你的客户端需要按照另一个答案中详细描述的方式正确发送Accepts头。 - Phil

Answer 2

这种警告通常是由请求的HTTP头引起的。 具体来说，是Accept请求头。 HTTP头的MDN文档

Accept请求HTTP头广告化客户端能够理解的内容类型，表示为MIME类型。使用内容协商，服务器然后选择一个建议，使用它并通过Content-Type响应头通知客户端其选择。根据请求执行的上下文，浏览器设置此标头的适当值....

application/json可能不在浏览器发送的Accept头的MIME类型列表中，因此会出现警告。

解决方案

自定义HTTP标头只能通过XMLHttpRequest或实现它的任何js库包装程序以编程方式发送。

- Kudehinbu Oluwaponle

---

这是最正确和信息量丰富的答案。我想知道为什么在直接访问我的浏览器中的JSON API端点时会发生这种情况。 - Phil

Answer 3

实际上这是Chrome的一个怪癖，而不是JavaScript库导致的。以下是解决方法：

为了防止该消息出现，并使Chrome可以在控制台中漂亮地呈现JSON响应，请将查询字符串附加到您的请求URL中。

例如：

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

- John

Answer 4

我采用了不同的方法。我改用$.post，从那以后错误就消失了。

- tamakisquare

Answer 5

这也发生在我身上，一旦我移除了这个：enctype="multipart/form-data"，它就开始正常运作而没有警告。

- daviddv

Answer 6

在提交之前，您可以简单地使用JSON.stringify（options）将JSON对象转换为字符串，然后警告消失并正常工作。

- driftcrow

Answer 7

使用 dataType: "jsonp"。我之前也遇到了同样的错误，这个方法对我有用。

- Roland Kákonyi