Google Place API - 요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.따라서 오리진 'null'은 액세스가 허용되지 않습니다.
Google Place API를 사용하고 있습니다.
활자 도움의 장소를 제안받고 싶은 것.
그래서 내가 한 일은...
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);
});
});
그래서 제가 요청하는 링크는-
브라우저에서 이 링크로 이동하면 이와 같은 출력을 얻을 수 있습니다(ck를 시도해 보십시오).
하지만 jQuery의 .getJ로 시도하면SON 또는 .ajax, 이 메시지로 인해 내 요청이 차단되었습니다.
.
따라서 XMLHTTPRequest는 다음 이유로 차단됩니다.
요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.따라서 오리진 'null'은 액세스가 허용되지 않습니다.
Stack Overflow에서 이 문제의 해결 방법을 확인하고 이곳저곳을 살펴보았지만, 해결 방법이 완벽하게 나오지 않습니다.
누구 좀 가르쳐 주시겠어요?
여기서 @sideshowbarker의 답변을 찾은 후 작업을 시작했습니다.
REST API에서 데이터를 가져오려고 할 때 요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.
그 후, 다음과 같은 어프로치를 사용해 작업을 실시했습니다.
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?"))
자세한 내용은 위 링크의 답변에서 확인할 수 있습니다.
AJAX 요청은 송신자와 수신자의 포트, 프로토콜 및 도메인이 동일한 경우에만 가능합니다. CORS는 Cross-origin 리소스 공유를 의미하며 서버 측에서 지원되어야 합니다.
솔루션
JSONP
JSONP 또는 "패딩이 있는 JSON"은 웹 브라우저에서 실행되는 JavaScript 프로그램에서 다른 도메인의 서버에 데이터를 요청하기 위해 사용되는 통신 기술입니다.이는 동일한 원본 정책 때문에 일반적인 웹 브라우저에서는 금지되어 있습니다.
이런 게 짝짓기에 도움이 될 거야:)
$.ajax({
url: Auto_Complete_Link,
type: "GET",
dataType: 'jsonp',
cache: false,
success: function(response){
alert(response);
}
});
Google은 API 클라이언트 라이브러리를 제공합니다.
<script src="https://apis.google.com/js/api.js" type="text/javascript"></script>
API 경로와 파라미터에 따라 Google API 요청을 수행할 수 있습니다.
var restRequest = gapi.client.request({
'path': 'https://people.googleapis.com/v1/people/me/connections',
'params': {'sortOrder': 'LAST_NAME_ASCENDING'}
});
라이브러리는 구글 도메인에서 제공되기 때문에 CORS 문제 없이 구글 API를 안전하게 호출할 수 있습니다.
그래, 이게 자바스크립트로 하는 방법이야...구글은 이를 위한 자체 기능을 가지고 있습니다.
링크: https://developers.google.com/maps/documentation/javascript/places#place_search_requests
var map;
var service;
var infowindow;
function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: '500',
types: ['store']
};
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
}
}
아이디★★★★★★★★★★★...JSONAray를 사용하다 뒤에 for 에서는, 「」의 「」에 .var place = results[i];는 want will like를 수 .
console.log(place.name);
console.log(place.place_id);
var types = String(place.types);
types=types.split(",");
console.log(types[0]);
ajax취득하다Google Place API둘 다 않다, 쓰다, 쓰다, 쓰다, 쓰다.jsonperror :) 문제도 하지 않았습니다.
클라이언트 측에서는 https://developers.google.com/maps/documentation/javascript/tutorial 대신 Google Javascript Library를 사용하는 방법밖에 없습니다.
또는 서버 측에서 Google place api를 가져온 후 클라이언트 측을 위한 자체 api를 만들 수 있습니다.
javascript 파일과 같은 서버에 PHP 파일을 작성함으로써 문제를 해결할 수 있었습니다.그런 다음 cURL을 사용하여 구글에서 데이터를 가져와 js 파일로 다시 보냅니다.
PHP 파일
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://maps.googleapis.com/maps/api/place/textsearch/xml?query=" . $_POST['search'] . "&key=".$api);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
curl_close($ch);
echo $output;
Javascript 파일
var search = encodeURI($("#input_field").val());
$.post("curl.php", { search: search }, function(xml){
$(xml).find('result').each(function(){
var title = $(this).find('name').text();
console.log(title);
});
});
이 솔루션에서는 CORS 에러가 발생하지 않습니다.
이렇게 구글맵 API에 접속했다.
$scope.getLocationFromAddress = function(address) {
if($scope.address!="Your Location"){
$scope.position = "";
delete $http.defaults.headers.common['X-Requested-With'];
$http(
{
method : 'GET',
url : 'https://maps.googleapis.com/maps/api/geocode/json?address='+ address+'&key=AIzaSyAAqEuv_SHtc0ByecPXSQiKH5f2p2t5oP4',
}).success(function(data, status, headers, config) {
$scope.position = data.results[0].geometry.location.lat+","+data.results[0].geometry.location.lng;
}).error(function(data, status, headers, config) {
debugger;
console.log(data);
});
}
}
안녕하세요.
Google 거리 매트릭스를 사용해 보십시오.
var origin = new google.maps.LatLng(detectedLatitude,detectedLongitude);
var destination = new google.maps.LatLng(latitudeVal,langtitudeVal);
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [origin],
destinations: [destination],
travelMode: 'DRIVING',
unitSystem: google.maps.UnitSystem.METRIC,
durationInTraffic: true,
avoidHighways: false,
avoidTolls: false
}, response_data);
function response_data(responseDis, status) {
if (status !== google.maps.DistanceMatrixStatus.OK || status != "OK"){
console.log('Error:', status);
// OR
alert(status);
}else{
alert(responseDis.rows[0].elements[0].distance.text);
}
});
JSONP를 사용하는 경우 CONSOLE에서 missing statement 오류가 발생할 수 있습니다.
언급URL : https://stackoverflow.com/questions/28359730/google-place-api-no-access-control-allow-origin-header-is-present-on-the-req
'programing' 카테고리의 다른 글
| 예약된 단어를 속성 이름으로 사용, 다시 방문 (0) | 2023.04.06 |
|---|---|
| Mongo 컬렉션을 JSON 형식으로 덤프 (0) | 2023.04.06 |
| WordPress - Breadcrumb NavXT의 카테고리 문제 (0) | 2023.04.06 |
| 경고: "compass:server"(compass) 작업 실행 중 (0) | 2023.04.06 |
| '액세스 제어-허용-오리진' 없음 - 노드/Apache 포트 문제 (0) | 2023.04.06 |