В запрошенном ресурсе присутствует Google Place API - нет заголовка «Access-Control-Allow-Origin». Происхождение 'null', следовательно, не допускает доступа

Я использую API Google Place.

Я хочу получить предложение о месте для помощи типа.

Итак, что я сделал,

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);
    });
});

Поэтому в какой ссылке я прошу -

https://maps.googleapis.com/maps/api/place/autocomplete/json?key=AIzaSyAK08OEC-B2kSyWfSdeCzdIkVnT44bcBwM&types=geocode&language=en&input=Khu

И если я перейду к этой ссылке с браузером, я смогу получить выход вроде этого (пожалуйста, попробуйте ck) -

11

Но если я попытаюсь с помощью jQuery's .getJSON или .ajax , я получаю мой запрос заблокированным этим сообщением -

222,

Так что XMLHTTPRequest заблокирован из-за -

В запрошенном ресурсе нет заголовка «Access-Control-Allow-Origin». Поэтому исходный 'null' не допускается.

Я проверил в StackOverflow решение этой проблемы и прохожу здесь , [здесь 4 и здесь , но не могу получить мое решение отлично.

Кто-нибудь может просветить меня?

javascript,jquery,ajax,google-maps,google-places-api,

25

Ответов: 8

10 принят

Запросы AJAX возможны только в том случае, если порт, протокол и домен отправителя и получателя равны, если не могут привести к CORS. CORS означает совместное использование ресурсов Cross-origin и должен поддерживаться на стороне сервера.

Решение

JSONP

JSONP или «JSON with padding» - это метод связи, используемый в программах JavaScript, запущенных в веб-браузерах, для запроса данных с сервера в другом домене, что запрещено обычными веб-браузерами из-за политики одного и того же происхождения.

Что-то вроде этого может помочь вам спать .. :)

$.ajax({
            url: Auto_Complete_Link, 
            type: "GET",   
            dataType: 'jsonp',
            cache: false,
            success: function(response){                          
                alert(response);                   
            }           
        });
3

ОК, так вот как мы это делаем в javascript ... у google есть свои собственные функции для этого ....

link: 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]);
    }
  }
}

любой хочет получить доступ к Id места и тому подобное, как мы это делаем ... В функции обратного вызова у нас есть JSONArray мест, возвращаемых google ... В функции обратного вызова внутри цикла for после строки var place = results[i];вы можете получить wat u want like

console.log(place.name);
console.log(place.place_id);
var types = String(place.types);
types=types.split(",");
console.log(types[0]);
2

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'}
});

Поскольку библиотека обслуживается из домена google, она может безопасно вызывать API Google без проблем с CORS.

Документы Google о том, как использовать CORS.

2

Я смог решить проблему, создав файл PHP на том же сервере, что и мой файл javascript. Затем, используя cURL, вы получите данные из Google и отправьте их обратно в файл 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.

1

Я получил доступ к API карт google, как это

    $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);
        });
    }
}
JavaScript, JQuery, AJAX, Google-карты, Google-места-апи,
Похожие вопросы
Яндекс.Метрика