jQuery and Ajax with json - fails in IE

Question

I'm using jQuery (1.7.0) to make a json/ajax call to Spotify. The following code works fine in Chrome and Firefox, but causes an error (Error: Access is denied.) in IE.

 $.ajax({
     url: 'http://ws.spotify.com/lookup/1/.json',    
     type: 'GET',    
     dataType: 'json',    
     cache: true,    
     data: {    
       uri: "someartist",    
       extras: "album"    
     },    
     success: successfn,    
     error:function(xhr, status, errorThrown) {    
       alert("networking error: "+errorThrown+'\n'+status+'\n'+xhr.statusText);    
     }
 });

The success function is called in Chrome and FF, but the error function is called in IE with the above message. I have set cors to true: jQuery.support.cors = true;.

It works on Chrome and FF both locally and on my server, it works in IE locally but not on the server. Changing cache: false causes problems at the spotify end - doesn't line additional parameters, so I get a "bad request" error.

Grateful for any pointers.

Thanks

Abo

Answer 1

I'm surprised this works on Chrome or Firefox. You shouldn't be able to run cross-domain JSON requests.

If Spotify API supports it, you should use JSONP in order to access resources from other domains.

Also see: No response from jQuery ajax call

Answer 2

The above answer about using jsonp is correct; I want to add:

Don't set

jquery.support.cors = true;

I'm not sure why so many questions begin by stating they took that step. This property is meant to be read to find out if the browser supports CORS. You should only override it if you know differently, and in my experience it's accurate for all major browsers. Setting it to true doesn't enable the browser to use CORS, it just denies you the info that CORS is going to fail.

http://api.jquery.com/jQuery.support/

Answer 3

can you give an example of returned data?

at a /guess/, it either has something to do with the filename ".json", or the JSON returned has something weird about it.

Answer 4

You are relying on the spotify url to give a Access-Control-Allow-Origin:* in their header to allow cross domain requests from all domains. Internet explorer however doesn't support this, so it gives access denied.

access-control-allow-origin explained. (TLDR: Servers may allow cross domain ajax in their headers)

If you need this to work in IE, you could use spotify's JSONP API if they have one or make the AJAX request in flash, which works in all browsers and passes the requests response data to your javascript.

Answer 5

I don't see this working in FF. You can't make cross-domain Ajax calls. So I'm not sure what's going on when you say that it works in FF. But I just tried the following in FF and I got the error. So all you can do is make the call on the server side and then include the results in your page.

http://jsfiddle.net/2XWGn/