0
400
VistasGoogle Place API - No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access
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 and here, but can't get my solution perfectly.
Can anyone please enlighten me?
3 Respuestas
Responde la pregunta0
I got it working after finding answer by @sideshowbarker here:
And then used this approach to get it working:
const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${latitude},${longitude}&radius=500&key=[API KEY]"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
.then(response => response.json())
.then(contents => console.log(contents))
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))
More info can be found in the answer in link above.
0
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.
Solution
JSONP
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.. :)
$.ajax({
url: Auto_Complete_Link,
type: "GET",
dataType: 'jsonp',
cache: false,
success: function(response){
alert(response);
}
});
0
Google provides API Client library:
<script src="https://apis.google.com/js/api.js" type="text/javascript"></script>
It can do google API requests for you, given the API path and parameters:
var restRequest = gapi.client.request({
'path': 'https://people.googleapis.com/v1/people/me/connections',
'params': {'sortOrder': 'LAST_NAME_ASCENDING'}
});
Since the library is served from google domain, it can safely call google API's without CORS issues.