Origin 'url' is not allowed by Access-Control-Allow-Origin

Question

I'm trying to get a currency rate with the Google Currency Calculator using the following jquery (dummy) code:

    $.getJSON("http://www.google.com/ig/calculator?hl=en&q=1" + "DOP" + "=?" + "USD",
        function(data) {
            $('.currNumber').each(function (index) {
                $(this).html(parseFloat($(this).html()) * 0.02681);
                                  });
          });

XMLHttpRequest cannot load http://www.google.com/ig/calculator?hl=en&q=1DOP=?USD. Origin 'hostURL' is not allowed by Access-Control-Allow-Origin.

Looking in the site I've found various topics on the subject but they mostly refer to local file access and attempt to solve it by starting chrome with an additional parameter (I'm also using chrome) but such is not my issue, which actually seems more related to cross-domain restrictions.

So, question is: How can I use jQuery to get the rate from that url?

Answer 1

Ajax requests are limited by the browser's Same Origin Policy. In a nutshell, that means that you can't talk directly to a server via ajax that isn't on the same domain as the page your script is running in. So, unless you're developing a page for google.com, you can't talk to google.com directly.

There are work-arounds for this limitation involving the insertion of script tags (JS files loaded via script tags are not subject to the same origin policy) and then using JSONP callbacks to communicate data results back to your main script from those script tags. That is probably what you need to do here if the API you're attempting to use supports it.

jQuery will help you a lot here as it can automatically turn an ajax call into a JSONP call that is loaded via script tags and can work in cross domain situations. According to the jQuery doc for it's ajax function, it will do this automatically if it sees "callback=" in the parameter string for the ajax call or if you set the crossDomain option.

Answer 2

Edit
I thought it was clear what the problem was but it seems it might not be so here goes. This error you're seeing is the server restricting your domain from accessing it's resources via ajax requests. This is standard JavaScript security - your script can only talk to the domain it originated from. Since your JavaScript was not loaded from Google's domains, it's not in the list of domains allowed to access the calculator API via ajax and that's why you see this error message.

Options for making cross domain requests with jQuery are outlined here. As I mentioned earlier, JSONP will only be a valid option if the server supports it because it must send back appropriately formatted JSON.

---

It might help if you provided links to the pages that you're referring to.

From the looks of things though, this API doesn't support JSONP (unless there is an undocumented parameter) which is pretty much your only option for cross-domain ajax requests in this case since you don't control the server and can't change the access control headers.

You might want to consider building a server-side resource that will access this API for you without being constrained by the JavaScript security model such as the PHP script here.