当前位置: 首页 > 知识库问答 >
问题:

如何使用CORS实现JavaScript Google Places API请求

牟慎之
2023-03-14

我真的不明白我该怎么做:

var requestURL = 'https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw';

console.log(requestURL);

$.getJSON( requestURL, function( data ) {
  // data
  console.log(data);
});

和我的HTML文件:

  <body>

        <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
        <script src="main.js" charset="utf-8"></script>   
  </body>

我总是得到请求的资源上没有'Access-Control-Allow-Origin'标头。消息...即使在浏览器中转到https://maps.googleapis.com/maps/api/place/details/JSON?placeid=chijn1t_tdeuemsrusoyg83fry4&key=aizasyaw4cqp3kxwykrhfzerfcgsl--rfce4tnw,也会返回正确的JSON。

共有1个答案

车峻熙
2023-03-14

您试图在客户端使用Google Places API Web服务,而它是为服务器端应用程序设计的。这可能是服务器没有设置适当的CORS响应头的原因。

正如Place Details文档开头的注释中所解释的,您应该使用Google Maps JavaScript API中的Places库:

如果您正在构建客户端应用程序,请查看Android的Google Places API、iOS的Google Places API以及Google Maps JavaScript API中的Places库。

<head>
    <script type="text/javascript">
        function logPlaceDetails() {
          var service = new google.maps.places.PlacesService(document.getElementById('map'));
          service.getDetails({
            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
          }, function (place, status) {
            console.log('Place details:', place);
          });
        }
    </script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw&libraries=places&callback=logPlaceDetails"></script>
</head>
<body>
    <div id="map"></div>
</body>
 类似资料:
  • 如何使用cURL调试CORS请求?到目前为止,我找不到任何“模拟”飞行前请求的方法。

  • 问题内容: 我有一个angular.js应用程序,我需要做CORS请求。 我想使用以下角度资源定义我的休息服务“角度”:http : //docs.angularjs.org/tutorial/step_11。 但是我还没有找到一种方法来使它工作。在google上,我找到了以下示例代码:http : //jsfiddle.net/ricardohbin/E3YEt/,但这似乎不适用于angular

  • 有人知道出了什么问题吗?

  • 本文向大家介绍vue如何使用async、await实现同步请求,包括了vue如何使用async、await实现同步请求的使用技巧和注意事项,需要的朋友参考一下 这篇文章主要介绍了vue如何使用async、await实现同步请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 以下是vue method的demo: 其中方法需要用async修饰, 然

  • 本文向大家介绍PHP如何使用cURL实现Get和Post请求,包括了PHP如何使用cURL实现Get和Post请求的使用技巧和注意事项,需要的朋友参考一下 先来看一下在PHP中建立cURL请求的基本步骤:   (1)初始化     curl_init()   (2)设置变量     curl_setopt() 。最为重要。有一长串cURL参数可供设置,它们能指定URL请求的各个细节。要一次性全部看

  • 问题内容: 我正在尝试通过javascript发布到我的 跨域 * 休息服务 *,并且意识到除非我使用此规范,否则这是不可能的; http://www.w3.org/wiki/CORS_Enabled 但是,关于如何实现此功能的文档非常有限,我有几个问题; 1-我使用 Glassfish Jee6 应用服务器,所以我可以简单地在我的web.xml中添加一个 码头 过滤器并完成工作吗? 2-并且对于