Vue, Axios and Google Maps Place API CORS error

Question

I've looked at the other answers, but unless I'm not getting the answer, they don't answer my question.

Environment

NodeJS 12.19.0 VueJS 2.6.10 Axios 0.15.3

Current config for Axios:

axios.defaults.headers.common['Authorization'] = store.apiKey
axios.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded, application/json'
axios.defaults.headers.common.crossDomain = true
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*'
axios.defaults.headers.common['Access-Control-Allow-Origin'] = 'https://maps.googleapis.com/maps/api/*'
axios.defaults.headers.common['Accept'] = 'application/json, text/plain, text/html, application/xhtml+xml, application/xml, */*'

I've tried this as well:

axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*, https://maps.googleapis.com/'

My Axios call (from method section in a mixin):

...
        loadPoi (lat, lng, radius = null, type = null) {
    
          if (!lat || !lng) {
            this.$message({message: 'Unable to load Places of Interest: invalid lat or lng values',
              type: 'warning'
            })
            return
          }
    
          let url = 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=' + lat + ',' + lng + (radius ? '&radius=' + radius : '') + (type ? '&type=' + type : '') + '&key=' + GOOGLE_API_KEY
    
          console.log('loadPoi', url)
    /*
          var xmlHttp = new XMLHttpRequest()
          xmlHttp.open('GET', url, false)  // false for synchronous request
          xmlHttp.send(null)
          console.log(xmlHttp.responseText)
    */
          axios.get(url).then(response => {
            this.places = response.results
          })
          .catch(e => {
            this.$message({message: 'Unable to load Places of Interest [' + e + ']',
              type: 'error'
            })
          })
        },
...

As you can see, even tried raw JavaScript call, same result.

The same URL works perfectly fine in the browser.

However when I access it from Axios, I get this error:

The raw header response:

GET /maps/api/place/nearbysearch/json?location=2.0978,103.6063&radius=5000&key=[KEY] undefined
Host: maps.googleapis.com
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:82.0) Gecko/20100101 Firefox/82.0
Accept: application/json, text/plain, text/html, application/xhtml+xml, application/xml, */*
Accept-Language: en-GB,en;q=0.7,es-MX;q=0.3
Accept-Encoding: gzip, deflate, br
Authorization: undefined

crossDomain: true
X-Requested-With: XMLHttpRequest
Access-Control-Allow-Origin: https://maps.googleapis.com/maps/api/*
Origin: http://localhost:8080
DNT: 1
Connection: keep-alive
Referer: http://localhost:8080/

Not sure if this is the answer: https://stackoverflow.com/questions/48647369/google-places-api-cors-error If it is, why? — Anthony, Nov 18 '20 at 03:01

score -1 · Answer 1 · answered Nov 18 '20 at 03:11

Axios use for sent HTTP request, set 'Access-Control-Allow-Origin' header on a request is meaningless.

In response, the server sends back an Access-Control-Allow-Origin header with Access-Control-Allow-Origin: *, which means that the resource can be accessed by any origin. enter link description here

So, to allow CORS, the server-side need to add Access-Control-Allow-Origin: * within its HTTP response.

But, it seems the response is from google API in your case, I think such service should already allow cross-origin access, could you please produce detailed error output?

Vue, Axios and Google Maps Place API CORS error

Environment

1 Answers1