VueJS axios CORS Google Api

Posted 2023-03-04

【中文标题】VueJS axios CORS Google Api

【英文标题】：

【发布时间】：2018-06-03 19:09:20

【问题描述】：

我尝试从 API Google Places 获取数据

axios.get('https://maps.googleapis.com/maps/api/place/details/json?placeid=...&key=mykey')
    .then(response => 
      commit('SET_REVIEWS',  list: response.data )
    , error => 
      console.log(error)
    )                                                                                              

然后我有这个错误 我知道服务器端 CORS 的错误，但我该怎么办？

【问题讨论】：

唯一受支持的使用 Places API 端点的方法是使用官方文档中概述的 Places 库。见***.com/questions/43443836/… 和***.com/questions/44336773/…

【参考方案1】：

在我的项目中，我使用 NuxtJS 并找到了解决方案。 您必须在服务器端（nodeJS）而不是客户端发出请求。 如下所示，方法 fetch 允许您执行此操作，并且有效https://nuxtjs.org/guide/vuex-store#the-fetch-method

【讨论】：

如何在前端解决这个问题？我不使用服务器端渲染。

在前端您应该使用 Google Maps javascript API 的地点库：developers.google.com/maps/documentation/javascript/places

【参考方案2】：

只需在您自己的服务器上创建和调用网络服务，然后再调用谷歌的网络服务。

您的 web 服务的主要代码在 php 中可能如下所示：

$url = 'https://maps.googleapis.com/maps/api/place/details/json?key=' . $key . '&placeid=' . $place_id; echo json_decode(file_get_contents($url), true);