Question

我正在尝试增加我在此项目中为公共艺术作品拍摄的照片集合，我正在使用Google Places API中的照片。它说here您可以发送详细信息请求以获取十张照片的数组。最后，我将解压缩响应以获取每张照片的Google photo reference，并对阵列中的每张照片发出请求并进行显示。

不幸的是，当我发送详细信息请求时，此计划会中断。这是我得到的确切错误：

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

您需要使用server side proxy来防止此错误。当你直接访问网址时它会起作用，因为你没有原点。

对本地服务器的JS AJAX请求 - ＆gt;远程服务器，接收请求，发送响应，远程服务器 - ＆gt;本地服务器 - ＆gt; AJAX请求JS。

检查这个相关的SO问题：

您可以修改您的API服务器CORS is enabled，也可以按照＆＃34;结合现有服务器＆＃34;下的instructions on the webpack-dev-server页面进行操作。将资产服务与webpack-dev-server和您自己的API服务器结合起来。

How do I make a CORS request with fetch on my localhost?

希望这有帮助！

Answer 2

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

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

Answer 3

我提出了一个类似的问题，但该问题已经结束：
React - development server,"cors" issues using https url to retrieve data from api

我从本地主机使用google api时遇到了完全相同的问题。经过一整天的痛苦尝试，解决方案非常简单。

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

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

3 个答案: