JSONP request to TinySong always failing

Question

I am trying to send a JSONP request to the tinysong api with the following code

var url = "http://tinysong.com/s/calvin+harris?format=json&limit=3&key=api_key"

function jsonpCallback(json) {
    console.log(json);
}

var script = document.createElement('script');
script.src = url+'&callback=jsonpCallback';
document.body.appendChild(script);

But keep on getting the message in the console

Resource interpreted as Script but transferred with MIME type text/html: 

I also tried the following and got the same error

$.ajax({
    type: 'GET',
    url: url,
    jsonpCallback: 'jsonCallback',
    dataType: 'jsonp',
    success: function(json) {
        console.log(json);
    },
    error: function(e) {
        console.log(e.message);
    }
});

function jsonCallback(json) { 
    console.log(json); 
}

I am sure the api is responding as I checked the network tab in chrome and can see a response from the API. Do you have any suggestions on what I can do, or I need to write a server side API which pings the TinySong api?

Answer 1

try adding in your ajax call the item

    jsonp:true,

on the line before or after your jsonpCallback also make sure your url has the '&callback=jsonpCallback' appended to it.

im looking at some old code of mine that works, and those are the only differences i see