110

I need to use foursquare API to search venues. Of course it is cross-domain.

It has no any problems in Firefox but in Internet Explorer (7, 8, 9 I've tested).

My javascript code looks like:

searchVenues: function(searchQuery) {
    $.ajax({
       url: 'https://api.foursquare.com/v2/venues/search',
       data: {
            sw: bound_south_west,
            ne: bound_north_east,
            query: searchQuery.query,
            oauth_token: FSQ_OAUTH_TOKEN,
            limit: 25,
            intent: 'browse',
            v: 20120206
       },
       cache: false,
       dataType: 'json',
       success: function(data) {
           displayResults(data, searchQuery.query);
       },
       error: function(xhr, status, errorThrown) {
           console.log(errorThrown+'\n'+status+'\n'+xhr.statusText);
       }
    });
}

In Firefox, it perfectly displays received data. In Internet Explorer, it logs on console:

No Transport
Error
Error

What should I do?

Vertexwahn
  • 7,709
  • 6
  • 64
  • 90
Sang
  • 2,790
  • 2
  • 20
  • 17
  • 6
    Check out the answers for [this SO post](http://stackoverflow.com/questions/5241088/jquery-call-to-webservice-returns-no-transport-error) – mkozicki Feb 07 '12 at 22:05

5 Answers5

267

I tested this on Windows Mobile 7.

After LOTS of time spent to understand, I finally found this:

http://bugs.jquery.com/ticket/10660

The Solution is simple, just set this:

$.support.cors = true;

and Ajax cross domain requests will work!

jpaugh
  • 6,634
  • 4
  • 38
  • 90
Magico
  • 2,814
  • 1
  • 16
  • 17
  • this is not working for IE browser... Can Any one please help me work it on IE – Rash May 15 '13 at 06:31
  • In my case, I also had to add 'crossDomain: true' to the .ajax method call in order for this work. – Pete Nelson May 30 '13 at 14:07
  • Thanks. After applying this, I'm now getting statusText as `"Error: Access is denied.\r\n"` on IE9. Any guesses? Nothing captured in network. – IsmailS Sep 25 '13 at 07:16
  • 47
    I am getting 'Error: Access is denied' as well on IE8 and IE9 – Darren Cooney Nov 08 '13 at 20:55
  • 1
    It's a bit discouraging that the accepted answer doesn't actually solve the problem on IE8 or IE9. – Warren Rumak Dec 08 '13 at 23:46
  • 2
    I have a similar issue. Works in IE10 but not in IE8 or IE9 – mishka Feb 17 '14 at 12:46
  • 7
    I also got "Error: Access is denied", my mistake was that I pulled HTTPS content from a HTTP domain. Make sure your website and your ajax target use the same protocols (either HTTP OR HTTPS) – Torben Mar 13 '14 at 13:49
  • 2
    I believe this is set by default now. For me the solution was an XDR request transport - see this popular answer: http://stackoverflow.com/a/10232313/217866 – jackocnr Dec 17 '14 at 20:11
  • I would also suggest to check headers of url being sent a request to. If possible by the way. – Nagama Inamdar Jan 09 '15 at 11:21
  • 1
    Works on IE 6 like a charm. Ashamed to post this in 2022. – Yogee Aug 30 '22 at 17:35
13
jQuery.support.cors = true;

$.ajax({
  crossDomain: true,
  url: "",
  type: "POST",
  dataType: "xml",
  data: soapMessage,
});

you need to make the cross domain value to true

Seth
  • 10,198
  • 10
  • 45
  • 68
amit thakur
  • 147
  • 1
  • 2
6

This problem has been bugging me for some time. As a workaround I use proxy scripts located on the same site. Such scripts simply execute server-to-server non-ajax HTTP request (think of curl and WinHttp.WinHttpRequest) and pass status and data back to the caller. It works, but obviously not very efficient because it has to perform two HTTP requests.

In my case, solution is a combination of all the things described above plus 'Access-Control-Allow-Origin' header.

$.support.cors = true; // this must precede $.ajax({}) configuration

$.ajax({
  crossDomain: true, // added in jQuery 1.5
  headers: {
    'Access-Control-Allow-Origin': '*'
  },
  ...
});

The web service that answers these calls also responds with 'Access-Control-Allow-Origin: *' header.

Seth
  • 10,198
  • 10
  • 45
  • 68
Alex D
  • 69
  • 1
  • 1
  • 4
    ... and yet this one is the first answer to mention the CORS header. The accepted solution did not work for me. – seanhodges Jan 22 '15 at 09:06
  • 2
    I guess this should rather be in the web.config of the service. – Fjodr Apr 30 '15 at 14:50
  • Adding that header to the client request makes no sense; it's [a response header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin). – Heretic Monkey Oct 26 '22 at 14:00
6

Try this solution:

https://stackoverflow.com/a/14463975/237091

Or, simply put this code in your HTML right after including jquery.

<!--[if lte IE 9]>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js'></script>
<![endif]-->
Community
  • 1
  • 1
Scott Stafford
  • 43,764
  • 28
  • 129
  • 177
  • I found the same problem occurring in Chrome (and possibly Android Browser) on Android, so perhaps leave off the conditional comment to allow all browsers to use this script. (The project home page is here: https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest) – Dave Burt May 22 '15 at 01:09
  • 1
    This worked for me. In addition to making sure that the Response Content-type is 'text/plain' – Nikolay Melnikov Sep 03 '15 at 14:59
  • I added it in Grunt after jquery and now it works (https://www.npmjs.com/package/jquery-ajax-transport-xdomainrequest). – tobias47n9e Apr 06 '16 at 11:20
0

I just changed the jquery version and replaced the CDN link and it worked! Just do it if crossDomain:true and $.support.cors = true not work.

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
Helper
  • 776
  • 7
  • 17