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

Question

在我正在处理的这个项目中，我正在尝试使用来自 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 和其他几个）都是按照原样编写的，所以我有点困惑为什么会收到错误。这是相关代码：

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()
    })
}

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

Answer 1

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

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

Answer 2

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

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

检查这个相关的SO问题：

• 当 API 不允许 Access-Control-Allow-Origin 时该怎么办
• webpack 开发服务器 CORS 问题

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

• 如何在本地主机上使用 fetch 发出 CORS 请求？

希望这可以帮助！