Cross-Site Ajax Call

Question

I am able to execute a web service through the browser but when I try and execute it through xmlhttprequest in javascript I get this error: Origin [] is not allowed by Access-Control-Allow-Origin.

How can I call the webservice through javascript? I'd prefer not to use a framework and just use basic client-side javascript.

For reference this is an instance of the web service I'm trying to consume: http://musicbrainz.org/ws/1/track/?type=xml&query=track:alive

Thanks.

outside of musicbrainz.org it can't be done with javascript, you'd need to set up a proxy server — generalhenry, Nov 26 '10 at 01:51
just curious though, do you use some server-side scripting language or just pure javascript? It would be much easier to just create a proxy script on server side and consume it using javascript. — jerjer, Nov 26 '10 at 01:54

score 1 · Answer 1 · answered Nov 26 '10 at 01:51

1

Not possible. You can't have an AJAX call to a different domain. It would need to be done by the server.

answered Nov 26 '10 at 01:51

Reverend Gonzo

39,701
6
59
77

There is more to ajax than `XMLHttpRequest` - in fact ajax predates these. Using Hidden iFrames or dynamically inserted ` – tobyodavies Nov 26 '10 at 01:55
The script wouldn't work here wither since he's trying to get data from a server he doesn't control. His only option is to pull that data from the one server he does control – Reverend Gonzo Nov 26 '10 at 02:03

VoteyDisciple · Answer 2 · 2010-11-26T02:01:38.780

You cannot use XMLHttpRequest on a page hosted at one domain to retrieve information from another domain. The browser simply won't allow it.

One common workaround is quite reliable if you have some control over the resource you're retrieving. It's called "JSONP" and the technique is to simply append a <script> tag to the header (dynamically, using JavaScript). That script can of course be hosted on any domain, so there's no cross-site scripting restrictions. If the script were to consist simply of JSON data, it wouldn't do much good. But wrap that JSON data in a function call — a function you control on your side — and it works great.

someFunctionName( { ... } );

If the resource you're retrieving doesn't support JSONP, your only recourse is to write a script on your own server (hosted on the same domain as the page, of course) that retrieves the target data. You can then make a normal AJAX call to your own script.

What you have described is an Ajax technique - There is no`XMLHttpRequest` requirement built into the term ajax - in fact the term ajax predates `XMLHttpRequest`. — tobyodavies, Nov 26 '10 at 01:57

score 0 · Answer 3 · edited May 23 '17 at 11:55

XmlHttpRequest is for requests for the same domain - it is called "Same origin policy". If you want to do cross-domain ajax request you have to use jsonp format. I do not think that using plain JavaScript is good idea - much better solution is ready-to-use framework e.g. jQuery or Mootools. In jQuery you have got method $.getJSON to making simple JSON and JSONP requests.

More read about: How exactly is the same-domain policy enforced? http://api.jquery.com/jQuery.getJSON/ http://en.wikipedia.org/wiki/JSON#JSONP

score 0 · Answer 4 · answered Nov 26 '10 at 02:07

NOT Possible, but you can create a proxy on your server, and access the data through the proxy:

Here is a proxy example in PHP:

proxy.php

<?php
    //header('Content-type: text/xml');
    $url = 'http://musicbrainz.org/ws/1/track/?type=xml&query=track:alivehttp://www.example.com/';
    $xml = file_get_contents($url);
    echo xml;
?>

You can now use proxy.php as your source url from javascript.

Cross-Site Ajax Call

4 Answers4

Linked