“资源解释为脚本，但使用 MIME 类型 application/json 传输”使用 Youtube 的 JavaScript API

Question

我使用 Google Chrome 的 JavaScript 控制台收到“资源解释为脚本，但使用 MIME 类型应用程序/json 传输”错误消息。

我目前正在本地计算机上运行以下代码：

var URL = "";
var YOUTUBE_ROOT = "http://gdata.youtube.com/feeds/api/videos?alt=jsonc&v=2";
var start_index = "&start-index=1";
var callback = "&jsonp=?"
function searchYouTube()
{
  var q = encodeURIComponent(jQuery("#query").val());
  var query = "&q="+q;
  URL = YOUTUBE_ROOT+start_index+query+callback; 
  alert(URL);
    $.getJSON(URL, function(data) {
        $.each(data.items, function(i, item) {
            alert(item);
        });
    });


}


jQuery(document).ready(function () {
     jQuery("#searchYouTube").click(searchYouTube);

});

我可以知道是什么导致了错误吗？

我尝试过使用“回调=？” , 'jsoncallback=?'对于回调，但所有导致 同样的错误信息。

请问我该如何解决这个问题？

最好的问候。

Answer 1

这是 Chrome 中的一个怪癖，以及它如何将 XHR 请求与典型的浏览器请求区分开来。

为了防止消息出现并允许 chrome 在控制台中将响应很好地呈现为 json，请将查询字符串附加到您的请求 URL。

例如

var xhr_object = new XMLHttpRequest();

var url = 'mysite.com/party_in_my_pants'; // Using this one, Chrome throws error

var url = 'mysite.com/party_in_my_pants?'; // This one, Chrome is sexy.

xhr_object.open('POST', url, false);

Answer 2

这是一个警告，而不是错误，不应阻止您的代码工作。

问题在于 YouTube 以错误的内容类型提供数据。

Answer 3

由于您使用 JSONP，因此您应该像这样在恕我直言：

$.ajax(URL, {
    crossDomain:true, 
    dataType: "jsonp", 
    success:function(data,text,xhqr){
        $.each(data, function(i, item) {
            alert(item);
        });
    }
});

正确的参数是callback，但是jQuery会自动生成一个，所以不要指定它。