如何从库中访问 Google Maps Directions API 客户端答案

【问题标题】：How to access the Google Maps Directions API client-side from a library如何从库中访问 Google Maps Directions API 客户端
【发布时间】：2018-02-14 00:02:37
【问题描述】：

我想针对 Google Directions API 发送请求。 Google 为 API 提供了Node.JS client library。但是，此 AP 仅在服务器端。尝试从浏览器脚本中使用它会导致CORS 失败。多个过去的答案（例如this one）表明这个库根本不能以这种方式使用。

替代方法是使用client-side JavaScript API。但是，这需要将<script> 标记添加到文档根目录。对于我的需求，这是错误的抽象级别。我想改用库或dot-js 文件中的方法。

根据here 给出的建议，我想问一下：有没有可以通过npm 使用的模块来查询Google Directions API 客户端？

【问题讨论】：

stackoverflow.com/questions/44804429/…的可能重复
stackoverflow.com/questions/46896362/… 的副本
@googlemaps/js-api-loader 包可用于动态加载库。

标签： reactjs google-maps-api-3 client-side google-directions-api

【解决方案1】：

从客户端访问 Google Maps Directions API 是不可能的。 Web 浏览器实现了单源策略，它要求对域的任何请求都来自同一个域。默认情况下不允许域之间的要求。通过在端点上设置正确的 CORS 标头，可以在服务器端启用跨域请求，但 Google 地图服务器选择不这样做。

有两种解决方法。一种是使用Google API Auth 库来包装请求。但是，我无法让它工作。

起作用的是使用reverse proxy。 Google Directions API 介绍页面中实际上提到了此解决方法（尽管是间接的）。您需要设置一个服务器，它将任何请求转发到 API 请求，然后将该 API 请求返回给原始请求者。由于这是一个服务器端请求，因此 SOP 将不适用，您可以继续使用。

如需示例实现，请查看 GitHub 上的 this repository。

【讨论】：

【解决方案2】：

https://developers.google.com/maps/documentation/directions

这是 Directions API 网络服务。它确实不需要添加<script> 标签。

您可以按照示例向服务发出直接请求：

https://maps.googleapis.com/maps/api/directions/json?origin=75+9th+Ave+New+York,+NY&destination=MetLife+Stadium+1+MetLife+Stadium+Dr+East+Rutherford,+NJ+07073&key=YOUR_API_KEY

一旦您生成了 API 密钥并将请求中的 YOUR_API_KEY 替换为您自己的密钥。

【讨论】：

这是否意味着 Google 发布的 NPM 客户端访问了不同的端点？
我不使用 NodeJS 或 React，所以我真的无法为您提供进一步的帮助，而且我有可能误解了您的问题...但是查看客户端库的 code您提到过，您可以看出端点与 Web 服务相同。
经过测试，这些指令对于访问服务器端的数据是正确的（例如通过 NPM 脚本），但它们不会在客户端工作（例如通过在 JavaScript 中发出请求），所以不幸的是他们没有解决我的问题！
查看另一个答案stackoverflow.com/a/48876011/3145360，了解为什么这不起作用。