向 Google Places API 发送详细信息请求 -(CORS 错误)

IT技术 google-maps-api-3 reactjs cors google-places-api isomorphic-fetch-api
2021-04-15 21:40:01

我正在尝试使用来自 Google Places API 的照片来增加我在这个项目中为公共艺术品收集的照片集。在这里说你可以发送一个详细信息请求来获取十张照片的数组。最终,我将解压响应以获取 Google对每张照片照片参考,并对数组中的每张照片发出请求并显示它。

不幸的是,当我发送我的详细信息请求时,这个计划中断了。这是我得到的确切错误:

Fetch API cannot load https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJ5zf5lfXKRIYR8rPafbwaL68&key=MY_API_KEY. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:4040' is therefore not allowed access. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我正在从我的本地主机运行它,我很确定这很重要。我所有的其他 API 调用(Google Maps API 和其他一些 API)都是按原样编写的,所以我有点困惑为什么我会收到错误。这是相关的代码:

The actual API call:

export function getPhotos(placeID) {
  let obj = {
    method: 'GET'
  };
  return fetch('https://maps.googleapis.com/maps/api/place/details/json?placeid=' + placeID + '&key=MY_API_KEY')
    .then((response) => {
      if (response.status >= 400){
        throw new Error("Error getting photos for placeID: " + placeID)
      }
      return response.json()
    })
}

如果您需要任何其他信息,请告诉我,我很乐意提供。谢谢!

3个回答

前面的答案建议使用一个服务器端代理。虽然对于访问不支持 CORS 或 JSONP 的 Web API 的一般情况来说,这是一个很好的解决方案,但它并不是解决这个特定问题的最佳解决方案。

相反,请使用专为此类用途设计的Google 的JavaScript Places Library该页面顶部的链接提供了其他示例、指南和参考资料。

这真的很有帮助。我得到了一个方向。我可以创建一个 NodeJS 服务器并请求 Places API 并将响应从 nodeJS 发送到我的前端应用程序或在我的前端应用程序中使用 Place 库。我仍然没有解决这个问题,而是继续努力。但是在看到这个答案后,我在顶部的 Google 位置 API 文档中发现,要开发客户端应用程序,必须使用 JavaScript 位置库而不是位置 API。
2021-05-23 21:40:01
即使在本地主机上使用地方库时,我仍然会遇到 cors 错误。
2021-06-12 21:40:01

您需要使用服务器端代理来防止此错误。当您直接访问 url 时它会起作用,因为这样做时您没有来源。

  • JS 对本地服务器的 AJAX 请求 -> 远程服务器,收到请求,发送响应,远程服务器 -> 本地服务器 -> 对 JS 的 AJAX 请求。

检查这个相关的问题:

您可以修改您的 API 服务器以启用 CORS,或者按照webpack-dev-server页面上“与现有服务器结合”下的说明将资产服务与 webpack-dev-server 和您自己的 API 服务器结合起来。

希望这可以帮助!

我提出了一个类似的问题,但已关闭:-
React - development server,“cors”问题使用 https url 从 api 检索数据

我使用来自本地主机的 google api 遇到了完全相同的问题。经过痛苦的一天尝试各种事情后,解决方案非常简单。

我添加了 Allow CORS: Access-Control-Allow-Origin chrome 扩展,将 api 列入白名单并打开 COR。这是一个非常古老的问题,当时该解决方案可能不可行,但我希望有一天能对某人有所帮助!

我们不能继续为浏览器上的工作添加扩展。最终用户如何知道使您的网页工作的扩展程序?
2021-06-02 21:40:01