JSON: How do I make cross-domain JSON call

Question

I try to run the following jquery code in local Network.

 $.ajax({
     type: "GET",
     url: "http://SomeSite/MyUrl/",
     cache: false,
     data: { ... },
     dataType: "json",

     error: function (xhr, status, error) {
                                    ... 
     },
     success: function (json) {
                                    ...
     });

Everything works fine until "SomeSite" is localhost. I mean the same server from what the page was downloaded.

But when 'SomeSite' is another (not localhost) network site it looks like request hangs. Not "error", nor "success" callback functions are called. How can I make this code work?

Thank you in advance!

Which browser(s) did you test it on? – Rian Schmits Apr 05 '11 at 08:25 — Rian Schmits, Apr 05 '11 at 08:25

score 16 · Answer 1 · answered Jul 23 '12 at 00:34

I had the same issue. Trying to get json from a server to wich I dind't had access (=> no JSONP).

I found http://benalman.com/projects/php-simple-proxy/ Add the php proxy to your server and do the ajax call to this file.
"Any GET parameters to be passed through to the remote URL resource must be urlencoded in this parameter."

$.ajax({
   type: 'GET',
   url:'proxy.php?url=http://anyDomain.com?someid=thispage',
   dataType: "json",
   success: function(data){
      // success_fn(data);
   },
   error: function(jqXHR, textStatus, errorThrown) {
      // error_fn(jqXHR, textStatus, errorThrown);
   }
});

where proxy.php (the file from Ben Alman) is hosted in your domain

Alternative (which I found to be second best to this):
http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/

The alternative worked like a charm. Thanks! But proxy php always failed, there were PHP notices about undefined optional parameters and the contents variable from the json were always null. — user2718671, Oct 06 '16 at 14:50

hippietrail · Answer 2 · 2017-09-26T16:00:11.157

7

Do you have server access to 'SomeSite', or is it 3rd party?

If you have access you can enable CORS ^{wp, home} on it. In its simplest form (data is not session sensitive), just add the header: Access-Control-Allow-Origin: *
If you don't have access do you know whether it supports JSONP ^{wp, so}? This typically involves passing at least a callback parameter in the URL. (Of course if you have access you can add JSONP support too.)
If you don't have access to make changes to 'SomeSite' and it supports neither CORS nor JSONP, you might be able to use YQL ^{wp, home} as a proxy. It does support both CORS and JSONP and can even translate data formats, select some part of the data, etc.
(Note that YQL respects robots.txt so if it's a 3rd party site that restricts automated access you might still be out of luck.)

edited Sep 26 '17 at 16:00

answered Aug 12 '12 at 10:04

hippietrail

15,848
18
99
158

What these links on hmoe and wp that each set goes to a different website supposed to do? – AaA Sep 26 '17 at 03:16
"wp" = the Wikipedia page for the thing. "home" is the thing's homepage. – hippietrail Sep 26 '17 at 04:30
your second home link is to a youtube video with lyrics I assume – AaA Sep 26 '17 at 06:07
1

@AaA: It looks like the homepage lapsed and somebody took it and put a redirect there. I'll replace it with the biggest SO question about JSONP. – hippietrail Sep 26 '17 at 15:59

score 2 · Answer 3 · edited May 16 '19 at 14:44

I had a similar issue. I tried the proxy script quoted by Symba but for some reason it could not work on my machine. In my case I was trying to send request to an app hosted on a JBoss AS on the same host. Somehow the version of JBoss I had did not have a way to modify response headers so that I could include "Access-Control-Allow-Origin", "*".

I solved it by using Symba's approach above but instead of Ben Alman's script I just set up a reverse proxy on my Apache Server, see https://www.simplified.guide/apache/configure-reverse-proxy . By defaults Apache would still have cross domain issues. By setting the response header "Access-Control-Allow-Origin", "*", see http://enable-cors.org/server_apache.html, the problem goes away.

score 1 · Answer 4 · answered Feb 16 '13 at 21:29

If you have access to the server that you want to load resources/data from you might modify the request headers of the servers response to include

"Access-Control-Allow-Origin", "*"

The Same Origin Policy enforced by the browsers - as far as I know in varying degrees of strictness depending on the browser - is (partially?) based on the values of the response headers.

I had the same issue when trying to load json from a webservice. All the JS hacks I found to get around that didn't really work and I was wondering why I even have to do this, if I want to load data from a server that I myself control (and trust). Then I learned that the response headers of the server play a vital role in this whole issue. When I added the above mentioned header to the http response of my webservice, the problem was solved.

You can by the way start chrome with the --disable-web-security flag to make it drop the SameOriginPolicy. This way you can also check the headers that were part of your response using chrome's network tab. This helped me a lot when debugging — bennidi, Feb 16 '13 at 21:31

score 1 · Answer 5 · answered Apr 05 '11 at 08:25

1

You can try jsonp request http://api.jquery.com/jQuery.ajax/ see crossdomain

answered Apr 05 '11 at 08:25

jimy

4,848
3
35
52

score 1 · Answer 6 · edited May 23 '17 at 11:45

1

Please have a look at cross domain jquery ajax request. If the remote server supports JSONP then I guess you can using callback.

edited May 23 '17 at 11:45

Community

1
1

answered Apr 05 '11 at 08:29

S L

14,262
17
77
116

score 1 · Answer 7 · answered Apr 05 '11 at 08:29

1

Actually you can only call GET.
There is no failproof way to call POST,PUT,DELETE or PATCH, via cross site scripting.
Only viable way is a hand written proxy.

answered Apr 05 '11 at 08:29

Sergey Mirvoda

3,209
2
26
30

score 1 · Answer 8 · answered Apr 05 '11 at 08:30

Due to the same origin policy you can't do this. One workaround is to use the Flash AJAX jQuery plugin http://flxhr.flensed.com/ that uses a Flash movie to bypass the same-origin policy.

The other options are to proxy the requests through your own domain or use JSONP.

JSON: How do I make cross-domain JSON call

8 Answers8

Linked