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

IT技术 javascript json google-api cors
2021-01-29 03:23:10

我真的不明白我应该如何进行这项工作：

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。

我相信 CORS 可以在这里帮助我。我不明白 CORS。拜托，任何人都可以用简单的术语帮助我吗？我应该改变什么才能使这项工作？

谢谢

3个回答

您正在尝试在客户端使用 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 Library。

注意：您需要先在 Google Developer Console 中启用 Google Maps JavaScript API。

这是您可以继续获取地点详细信息的方法（基于文档中的示例）：

<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>

Google Place 详细信息输出到控制台

@RyanMc 因为 rd3n 的回答没有回答你的问题，你能把修改后的代码作为答案发布吗？我有兴趣看看你做了什么。
2021-03-23 03:23:10
1）我刚刚替换const了varand (place, status) =>byfunction(place, status)所以没有更多的 ES6，2）你能详细说明一下吗？您在控制台中有错误吗？3) 我不是 Google 地图专家，但您似乎可以向 提供 Dom 节点而不是地图实例PlacesService，因此不会呈现任何地图。我已经相应地测试并更新了代码
2021-03-26 03:23:10
这看起来不错，但有几件事：1）您正在使用 ES6（我还不了解 ES6），2）它对我不起作用，3）我不想要地图，我只想返回该地点的对象，所以我可以以任何我选择的方式输出数据。谢谢你的帮助
2021-03-28 03:23:10
我终于通过修改 Google 文档中的示例来实现这一点。谢谢，您的回答为我指明了正确的方向。
2021-04-11 03:23:10

@rd3n 已经回答了为什么要使用 Google Maps 的 SDK，但是如果您确实需要在 Web 应用程序上使用 API 而不是 SDK（例如重用代码），您可以使用proxy来自Webpack 的 DevServer 的参数绕过 CORS 。

const GMAPS_PLACES_AUTOCOMPLETE_URL = (
  process.env.NODE_ENV === 'production'
    ? 'https://maps.googleapis.com/maps/api/place/autocomplete/json'
    : 'place-api' // on development, we'll use the Webpack's dev server to redirect the request

const urlParams = new URLSearchParams([
  ...
])

const response = await fetch(
  `${GMAPS_PLACES_AUTOCOMPLETE_URL}?${urlParams}`,
  { method: 'GET' }
)

而在你的webpack.config.js...

module.exports = {
  devServer: {
    proxy: {
      '/place-api': {
        target: 'https://maps.googleapis.com/maps/api/place/autocomplete/json',
        changeOrigin: true,
        pathRewrite: { '^/place-api': '' }
      }
    }
  }
}
但是，您如何在生产中进行这项工作，cors 安全性也在这里
2021-03-24 03:23:10

使用您提供的相同 url，这是针对纯前端 (React)，但安全性较低的解决方案：

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

从 url 中删除以下内容：“https://maps.googleapis.com/maps/api/place”并在您的 package.json 中创建一个代理行：

"proxy": "https://maps.googleapis.com/maps/api/place"

然后按照 google 文档，您将得到以下代码（无论您在哪里获取 api）：

var axios = require('axios');

var config = {
  method: 'get',
  url: '/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw', //the rest of your url
  secure: false //important
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});
其它你可能感兴趣的问题
上一篇jqGrid (v4.1.2) 树形网格的排序不适用于 Ajacency 模型 下一篇如何在 JavaScript 中以“YYYYmmdd”格式解析日期？