I'm receiving a "Resource interpreted as script but transferred with MIME type application/json" error message using Google Chrome's JavaScript console.

I'm currently running the following code on my local computer:

var URL = "";
var YOUTUBE_ROOT = ";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);

});

May I know what is causing the error?

I've tried using 'callback=?' , 'jsoncallback=?' for the callback, but all leads to the same error message.

May I know how do i fix this?

Best Regards.

I'm receiving a "Resource interpreted as script but transferred with MIME type application/json" error message using Google Chrome's JavaScript console.

I'm currently running the following code on my local computer:

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

});

May I know what is causing the error?

I've tried using 'callback=?' , 'jsoncallback=?' for the callback, but all leads to the same error message.

May I know how do i fix this?

Best Regards.

• javascript
• jquery
• youtube-api

3 Answers 3

Since you use JSONP, you should code it like this IMHO :

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

The correct parameter is callback but jQuery generates one automagically so dont specify it.

That's a warning, not an error, and shouldn't stop your code from working.

The fault is with YouTube for serving the data with the wrong content-type.

This is a quirk in Chrome and how it differentiates an a XHR request from a typical browser request.

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