向Google Places API发送详细请求 - (CORS错误)
问题描述:
我正在尝试增加该项目中公共艺术作品的照片集,我正在使用Google Places API中的照片进行处理。它说here,您可以发送详细信息请求,以获得10张照片的数组。最终,我将解压缩每个照片的谷歌photo reference的响应,并为阵列中的每张照片发出请求并显示它。向Google Places API发送详细请求 - (CORS错误)
不幸的是,当我发送我的详细信息请求时,此计划中断。这是我得到的确切的错误:
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()
})
}
让我知道如果您需要任何其他信息,我很乐意提供它。谢谢!
答
您需要使用server side proxy来防止此错误。它在你直接访问url时起作用,因为当你这样做的时候你没有出处。
- JS AJAX请求到本地服务器 - >远程服务器,请求接收响应中发送,远程服务器 - >本地服务器 - > AJAX请求JS。
选中此相关的SO问题:
您可以修改API服务器,以便CORS is enabled,或跟随下的“instructions on the webpack-dev-server页结合现有服务器“将资产服务与webpack-dev-se相结合rver和你自己的API服务器。
希望这有助于!
答
previous answer建议使用服务器端代理。虽然对于访问不支持CORS或JSONP的Web API的一般情况而言,这是一个很好的解决方案,但它不是解决此特定问题的最佳解决方案。
取而代之的是使用Google专门为此类用途设计的JavaScript Places Library。该页面顶部的链接提供了额外的样本,指南和参考资料。