VueJS axios CORS Google Api答案

【问题标题】：VueJS axios CORS Google ApiVueJS 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 库。见stackoverflow.com/questions/43443836/… 和stackoverflow.com/questions/44336773/…

标签： google-maps-api-3 vue.js cors

【解决方案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);

【讨论】：