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

Ответ 1

Запросы 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);                   
            }           
        });    

Ответ 2

Я нашел его работающим после того, как нашел ответ @sideshowbarker здесь:

Нет & # 39; Access-Control-Allow-Origin & # 39; заголовок присутствует в запрашиваемом ресурсе - при попытке получить данные из REST API

А затем использовал этот подход, чтобы заставить его работать:

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 doesnt 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("Cant access " + url + " response. Blocked by browser?"))

Более подробную информацию можно найти в ответе по ссылке выше.

Ответ 3

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

ссылка: 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]; u можно получить 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]);

Ответ 4

Google предоставляет клиентскую библиотеку API:

<script src="https://apis.google.com/js/api.js" type="text/javascript"></script>

Он может выполнять запросы Google API для вас, учитывая путь к 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.

Ответ 5

Я смог решить эту проблему, создав файл 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.

Ответ 6

Я получил доступ к 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);
        });
    }
}

Ответ 7

На стороне клиента мы не используем ajax fetching Google Place API, и не используем jsonp (синтаксическая ошибка:), ни мы не встретили проблему cors,

Единственный способ на стороне клиента - использовать Google Javascript Library вместо https://developers.google.com/maps/documentation/javascript/tutorial

Или вы можете получить google place api на стороне сервера, а затем создать свой собственный api для своей клиентской стороны.

Ответ 8

Привет,

Попробуйте с помощью матрицы расстояний 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.

Пожалуйста, обратитесь к этому документу нажмите здесь