jQuery 资源被解释为文档，但在 Chrome 开发者工具中使用 MIME 类型应用程序/json 警告传输
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6934393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resource interpreted as Document but transferred with MIME type application/json warning in Chrome Developer Tools
提问by tamakisquare
I have the following snippet, which uses the jQuery Form plugin to post a form to the server (in ajax).
我有以下代码段，它使用 jQuery Form 插件将表单发布到服务器（在 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
ajax 实现工作正常。但我收到警告
Resource interpreted as Document but transferred with MIME type application/json
资源被解释为 Document 但使用 MIME 类型 application/json 传输
in Chrome Developer Tools. I want to find out why the warning, or even better, a way to resolve it.
在 Chrome 开发者工具中。我想找出警告的原因，或者更好的解决方法。
I changed to use $.postinstead and magically the error was gone since then. I have no idea why $.postworks 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.
我改为使用，$.post并且神奇地从那时起错误消失了。我不知道为什么$.post有效但无效$form.ajaxSubmit。如果有人可以提供他们的解释，那就太好了。至少，这个问题得到了解决。下面是新代码。
var url = $form.attr("action");
$.post(
url,
$form.serialize(),
function(data) {
alert("success");
},
"json"
);
采纳答案by tamakisquare
I took a different approach. I switched to use $.post and the error has gone since then.
我采取了不同的方法。我改用 $.post 并且错误从那时起就消失了。
回答by HB.
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
从服务器端，在返回 JSON 响应的同时，更改 content-type：text/html
Now the browsers (Chrome, Firefox and IE8) do not give an error.
现在浏览器（Chrome、Firefox 和 IE8）不会出现错误。
回答by Kudehinbu Oluwaponle
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
由于请求 HTTP 标头，通常会标记此类警告。特别是 Accept 请求标头。 HTTP 标头的 MDN 文档说明
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....
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.
application/json 可能不在浏览器发送的 Accept 标头中的 MIME 类型列表中，因此出现警告。
Solution
解决方案
Custom HTTP headers can only be sent programmatically via XMLHttpRequest or any of the js library wrappers implementing it.
自定义 HTTP 标头只能通过 XMLHttpRequest 或任何实现它的 js 库包装器以编程方式发送。
回答by John
It's actually a quirk in Chrome, not the JavaScript library. Here's the fix:
这实际上是 Chrome 中的一个怪癖，而不是 JavaScript 库。这是修复：
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.
为了防止消息出现并允许 chrome 在控制台中将响应很好地呈现为 JSON，请将查询字符串附加到您的请求 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);
回答by driftcrow
you can simply use JSON.stringify(options) convert JSON object to string before submit, then warning dismiss and works fine
您可以简单地使用 JSON.stringify(options) 在提交之前将 JSON 对象转换为字符串，然后警告解除并正常工作
回答by daviddv
This happened to me, and once I removed this: enctype="multipart/form-data" It started working without the warning
这发生在我身上，一旦我删除了这个： enctype="multipart/form-data" 它开始在没有警告的情况下工作
回答by Roland Kákonyi
Use dataType: "jsonp". I had the same error before. It fixed for me.
使用dataType: "jsonp". 我以前也有同样的错误。它为我修好了。
