'Access-Control-Allow-Origin' Google finance converter gives an error javascript/jquery

Question

I'm working with one project module, where I want to get converted price from Google finance converter based on from currency code and amount. Here is my code:

$('.actual-price').tooltip({
    content: function(callback) {
        var url = 'https://www.google.com/finance/converter?a=25&from=USD&to=AMD';
        $.get(url, {}, function(data) {            
            callback(data);
        });
    },
    open: function(event, ui) {
        var $id = $(ui.tooltip).attr('id');
        $('div.ui-tooltip').not('#' + $id).remove();
    },
    close: function(event, ui) {
        $('.ui - tooltip').hide();
    }
});

It gives me an error:

XMLHttpRequest cannot load https://www.google.com/finance/converter?a=25&from=USD&to=AED. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin http://mytestsite.com is therefore not allowed access.

I've tried following ways to solve it, but seems like nothing works for me!

First: Added Access-Control-Allow-Origin to the web config.

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

Second: Using datatype jsonp:

dataType: "jsonp",

And already referred following posts:

“No 'Access-Control-Allow-Origin' header is present on the requested resource”

No 'Access-Control-Allow-Origin' header is present on the requested resource error

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access

“No 'Access-Control-Allow-Origin' header is present on the requested resource”

Side: It's working with my localhost, but when I try with another domain, it's give me an error!

Answer 1

Allow access origin must be allowed also at side, when you sending requests. If not you can install some browser extensions to bypass it or download entire page (php) end then process it, but you can also try cors-anywhere.herokuapp.com:

var myUrl = 'http://www.geoplugin.net/json.gp?ip=216.58.209.68';

var proxy = 'https://cors-anywhere.herokuapp.com/';

var finalURL = proxy + myUrl;

// With the get JSON (frequently used) method
$.getJSON(finalURL, function( data ) {
    console.log(data);
});

// With the get method
$.get(finalURL, function( data ) {
    console.log(data);
});

// With the post method
$.post(finalURL, function( data ) {
    console.log(data);
});   

More here.

And why is your app working on localhost host? I thing it is because Google have access origin set to allow connection from their domains and localhost.

Answer 2

You need to change Ajax Setting async: false as below:

JavaScript Code:

$('.actual-price').tooltip({
    content: function(callback) {
        var url = 'https://www.google.com/finance/converter?a=25&from=USD&to=AMD';
        $.ajaxSetup({async: false}); ////////// Added
        $.get(url, {}, function(data) {            
            callback(data);
        });
    },
    open: function(event, ui) {
        var $id = $(ui.tooltip).attr('id');
        $('div.ui-tooltip').not('#' + $id).remove();
    },
    close: function(event, ui) {
        $('.ui - tooltip').hide();
    }
});

Answer 3

This is an error when you try to make requests to another servers from local without a web server, if you are using chrome on local, just add this to your browser

when you upload the app to the server in production will work normally. because that's just a local problem that the browser block that types of requests.