如何在我的React应用程序中使用Googles Places API？

Question

我希望能够通过axios向google地方api发出get请求，其网址如下所示

https://maps.googleapis.com/maps/api/place/textsearch/json?query=pizza+&type=restaurant&location=-21.8029127,142.9766041&radius=10000&key=MYAPIKEY

但是我收到了CORS错误。

所以我一直试着找到如何实现这一点，我似乎无法找到一个简单的解决方案。我不想要当前npm库提供的任何地图或自动完成功能。我只是希望能够根据用户输入的查询从places api获取结果。

Answer 1

如果您收到CORS错误，则表示您的浏览器限制源自您的应用程序脚本的跨源请求。避免这种情况的一种解决方案是提供CORS头。但是，您无权访问API服务器来获取它。因此，您可以使用origin param。

在Google Maps API调用中指定原点

https://maps.googleapis.com/maps/api/place/textsearch/json?query=pizza+&type=restaurant&location=-21.8029127,142.9766041&radius=10000&key=MYAPIKEY&origin= *

请注意，我已提供origin=*。但是你可以使用你自己的DNS而不是*，以防你有一个设置。

以下是Mozilla Web Docs website关于角色的成绩单：

  

出于安全原因，浏览器会限制从脚本中发起的跨源HTTP请求。例如，XMLHttpRequest和Fetch API遵循同源策略。这意味着使用这些API的Web应用程序只能从加载应用程序的同一源请求HTTP资源，除非来自其他来源的响应包含正确的CORS标头。