1

我正在尝试增加该项目中公共艺术作品的照片集,我正在使用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() 
    }) 
} 

让我知道如果您需要任何其他信息,我很乐意提供它。谢谢!

回答

1

您需要使用server side proxy来防止此错误。它在你直接访问url时起作用,因为当你这样做的时候你没有出处。

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

选中此相关的SO问题:

您可以修改API服务器,以便CORS is enabled,或跟随下的“instructions on the webpack-dev-server页结合现有服务器“将资产服务与webpack-dev-se相结合rver和你自己的API服务器。

希望这有助于!

1

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

取而代之的是使用Google专门为此类用途设计的JavaScript Places Library。该页面顶部的链接提供了额外的样本,指南和参考资料。

相关问题