VueJS axios CORS Google Api

Question

I try to get data from 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)
    })

And after that i have this error I know the error with CORS on server side, but what should i do?

The only supported way to use the Places API endpoints is with the Places Library as outlined in the offcial documentation. See https://stackoverflow.com/questions/43443836/angular-cors-jsonp-and-google-maps-http-api-calls/43444274#43444274 and https://stackoverflow.com/questions/44336773/google-maps-api-no-access-control-allow-origin-header-is-present-on-the-reque/44339169#44339169 — sideshowbarker, Dec 21 '17 at 06:54

score 2 · Accepted Answer · edited Dec 21 '17 at 21:09

2

In my project I use NuxtJS and I found the solution. You have to make a request on the server side (nodeJS), not the client. As shown below, the method fetch allows you to do this and it works
https://nuxtjs.org/guide/vuex-store#the-fetch-method

edited Dec 21 '17 at 21:09

xomena

31,125
6
88
117

answered Dec 21 '17 at 10:18

Sergey Andreev

1,398
3
16
26

How can i resolve this trouble on frontend? I don't use server side rendering. – Игорь Демянюк Dec 21 '17 at 10:50
On frontend you should use places library of Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/places – xomena Dec 21 '17 at 21:11

score 0 · Answer 2 · answered Dec 21 '17 at 12:12

Simply create and call a webservice on your own server which in turn calls googles webservice.

The main code of your webservice could look like this, in PHP:

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

VueJS axios CORS Google Api

2 Answers2