向Google Places API发送详细请求 - （CORS错误） [英] Sending a details request to Google Places API - (CORS error)

问题描述

我正在努力扩充我在这个项目中为公共艺术作品收集的照片，我正在使用Google Places API的照片。它说此处，您可以发送详细信息请求以获取10张照片。最终，我会解开相应的回复，以便为每张照片获取Google的照片参考资料并发出请求为数组中的每张照片并显示它。

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

  Fetch API无法加载https://maps.googleapis.com/maps/ API /地点/信息/ JSON placeid = ChIJ5zf5lfXKRIYR8rPafbwaL68&安培;键= MY_API_KEY。 
否请求的资源上存在Access-Control-Allow-Origin标题。 
原因'http：// localhost：4040'因此不被允许访问。 
如果一个不透明的响应满足您的需求，请将请求的模式设置为'no-cors'以禁用CORS来获取资源。 
  

我从我的本地主机运行这个，我很确定这件事。我所有其他的API调用（Google Maps API和其他一些API调用）都是这样写的，所以我有点困惑为什么我会得到这个错误。这里是相关的代码：

pre $ 实际的API调用：

导出函数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.status> = 400）{
抛出新错误（获取placeID照片的错误：+ placeID）
}
return response.json（）
}）
}


需要任何其他信息，我很乐意提供。谢谢！

解决方案

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

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

I'm trying to augment the collection of photos I have for public artworks in this project I'm working on with photos from the Google Places API. It says here that you can send a details request to get an array of ten photos. Eventually I will unpack the response to get Google's photo reference for each photo and make requests for each photo in the array and display it.

Unfortunately, this plan breaks when I send my details request. This is the exact error I'm getting:

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.

I'm running this from my localhost and I'm pretty sure that matters. All of my other API calls (Google Maps API and a couple others) are written exactly as this is, so I'm a little confused why I'm getting the error. Here is the relevant code:

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

Let me know if you need any other information, I'd be happy to provide it. Thanks!

解决方案

The previous answer suggests using a server-side proxy. While that is a good solution for the general case of accessing a web API that does not support CORS or JSONP, it's not the best solution for this specific problem.

Instead, use Google's JavaScript Places Library which is designed specifically for this kind of use. The links at the top of that page provide additional samples, guides, and reference material.

这篇关于向Google Places API发送详细请求 - （CORS错误）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！