Google Place API - 请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许访问原点“null”

IT技术 javascript jquery ajax google-maps google-places-api
2021-02-21 16:12:25

我正在使用 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)-

11

但是如果我尝试使用 jQuery 的.getJSON.ajax,我的请求就会被这条消息阻止 -

222.

所以 XMLHTTPRequest 被阻止,因为 -

请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许访问 Origin 'null'。

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

任何人都可以请教我吗?

6个回答

我在这里找到@sideshowbarker 的答案后开始工作:

请求的资源上不存在“Access-Control-Allow-Origin”标头——尝试从 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 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?"))

更多信息可以在上面链接的答案中找到。

缺少必需的请求标头。必须指定以下之一:origin,x-requested-with
2021-04-28 16:12:25
您也可以简单地执行 jquery 请求: jQuery.getJSON( proxyurl+googlemapsurl, function( data ) {}); 感谢您的解决方案
2021-04-29 16:12:25
不工作了。
2021-04-30 16:12:25
现在不起作用。
2021-05-04 16:12:25

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);                   
            }           
        });    
不工作了
2021-04-20 16:12:25
当我运行 jsonp 时给我一个错误。以这种方式返回时,JSON 格式不正确。
2021-04-29 16:12:25
对我也不起作用,问题似乎是谷歌给了你 json 但你尝试 dataType:jsonp 这给了我错误
2021-05-06 16:12:25
不起作用!到目前为止,我知道 Google 的 api 只适用于 json 和 xhtml
2021-05-12 16:12:25
这不再起作用了。到目前为止没有错误,但警报方法不打印任何内容。
2021-05-13 16:12:25

谷歌提供 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 文档。

出于某种原因,这不适用于对https://maps.googleapis.com/maps/api/place/details/json. 我收到了 404。
2021-04-16 16:12:25

好的,这就是我们在 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]);

我能够通过在与我的 javascript 文件相同的服务器上创建一个 PHP 文件来解决这个问题。然后使用 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 错误。