Google Place API - 请求的资源上没有"Access-Control-Allow-Origin"标头.因此不允许原点'null'访问

Question

我使用的是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);
    });
});

所以我要求的链接是 -

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

如果我使用浏览器访问此链接,我可以获得类似的输出(请尝试ck​​) -

但是,如果我尝试使用jQuery的.getJSON或.ajax,我会通过此消息阻止我的请求 -

.

因此,XMLHTTPRequest被阻止 -

请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许原点'null'访问.

我已经在StackOverflow中检查了这个问题的解决方案并通过这里,[这里4和这里,但无法完美地得到我的解决方案.

有谁能请赐教？

Answer 1

只有当发送方和接收方的端口,协议和域相等时,AJAX请求才有可能,否则可能导致CORS.CORS代表跨源资源共享,必须在服务器端支持.

解

JSONP

JSONP或"带填充的JSON"是在Web浏览器中运行的JavaScript程序中使用的通信技术,用于从不同域中的服务器请求数据,这是典型Web浏览器因同源策略而禁止的.

这样的事情可能会帮助你交配.. :)

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

Answer 2

谷歌提供 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 域提供的，因此它可以安全地调用 google API，而不会出现 CORS 问题。

关于如何使用 CORS 的 Google 文档。

Answer 3

I got it working after finding answer by @sideshowbarker here:

No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API

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.

Answer 4

好的，这就是我们在 javascript 中的做法……谷歌对此有自己的功能……

链接：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......var place = results[i];你可以得到你想要的

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