Abrar Jahin Abrar Jahin - 2 years ago 635
Javascript Question

Google Place API - No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access

I am new in jQuery.

I am using Google Place API.

What I want to get suggestion of place for type helping.

So, what I have done is-

var Google_Places_API_KEY = "AIzaSyAK08OEC-B2kSyWfSdeCzdIkVnT44bcBwM"; //Get it from - https://code.google.com/apis/console/?noredirect#project:647731786600:access
var language = "en"; //'en' for English, 'nl' for Nederland's Language

var Auto_Complete_Link = "https://maps.googleapis.com/maps/api/place/autocomplete/json?key="+Google_Places_API_KEY+"&types=geocode&language="+language+"&input=Khu";
$.getJSON(Auto_Complete_Link , function(result)
$.each(result, function(i, field)
//$("div").append(field + " ");
//alert(i + "=="+ field);
console.error(i + "=="+ field);

So in what link I am requesting is -


And if I go to this link with browser, I can get output like it (please try to ck)-


But if I try with jQuery's .getJSON or .ajax, I am getting my request blocked with this message-


SO the XMLHTTPRequest is blocked because of -

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

I have checked in StackOverflow for this problem solution and go through here, [here4 and here, but can't get my solution perfectly.

Can anyone please enlighten me?

Thanks in advance for helping.

Answer Source

AJAX Requests are only possible if port, protocol and domain of sender and receiver are equal,if not might lead to CORS. CORS stands for Cross-origin resource sharing and has to be supported on the server side.



JSONP or "JSON with padding" is a communication technique used in JavaScript programs running in web browsers to request data from a server in a different domain, something prohibited by typical web browsers because of the same-origin policy.

Something like this might help you mate.. :)

            url: Auto_Complete_Link, 
            type: "GET",   
            dataType: 'jsonp',
            cache: false,
            success: function(response){                          
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download