资源被解释为文档，但在 Chrome 开发者工具中传输时带有 MIME 类型 application/json 警告

Question

我有以下代码片段，它使用 jQuery Form 插件将表单发布到服务器（在 ajax 中）。

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

  $form.ajaxSubmit(options);

形式：

<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 实现工作正常。但我收到警告

资源解释为文档，但使用 MIME 类型 application/json 传输

在 Chrome 开发者工具中使用 MIME 类型 application/json 进行传输。我想找出为什么会出现警告，或者更好的是解决它的方法。

我改为使用 $.post ，神奇的是，从那时起错误就消失了。我不知道为什么 $.post 有效，但 $form.ajaxSubmit 无效。如果有人能提供他们的解释那就太好了。至少，这个问题已经解决了。以下是新代码。

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

Answer 1

我面临着同样的错误。对我有用的解决方案是：

从服务器端，返回JSON响应时，更改content-type：text/html

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

Answer 2

此类警告通常会因请求 HTTP 标头而被标记。
特别是 Accept 请求标头。
HTTP 标头的 MDN 文档指出

接受请求 HTTP 标头通告客户端能够理解的内容类型（以 MIME 类型表示）。使用内容协商，服务器然后选择其中一个建议，使用它并通过 Content-Type 响应标头通知客户端其选择。浏览器根据请求完成的上下文为此标头设置足够的值...

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

解决方案

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

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

Answer 4

我采取了不同的方法。我改用 $.post 并且从那时起错误就消失了。

Answer 5

这发生在我身上，一旦我删除了这个：enctype =“multipart / form-data”
它在没有警告的情况下开始工作

Answer 6

您可以简单地使用 JSON.stringify(options) 在提交之前将 JSON 对象转换为字符串，然后警告关闭并且工作正常

Answer 7

使用数据类型：“jsonp”。我之前也遇到过同样的错误。它为我修好了。