title: Vue, Axios and Google Maps Place API CORS error
body: <p>I've looked at the other answers, but unless I'm not getting the answer, they don't answer my question.</p>
  <h3>Environment</h3>
  <p>NodeJS <strong>12.19.0</strong>
  VueJS <strong>2.6.10</strong>
  Axios <strong>0.15.3</strong></p>
  <p>Current config for Axios:</p>
  <pre><code>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, */*'
  </code></pre>
  <p>I've tried this as well:</p>
  <pre><code>axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*, https://maps.googleapis.com/'
  </code></pre>
  <p>My Axios call (<em>from method section in a mixin</em>):</p>
  <pre><code>...
          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 ? '&amp;radius=' + radius : '') + (type ? '&amp;type=' + type : '') + '&amp;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 =&gt; {
              this.places = response.results
            })
            .catch(e =&gt; {
              this.$message({message: 'Unable to load Places of Interest [' + e + ']',
                type: 'error'
              })
            })
          },
  ...
  </code></pre>
  <p>As you can see, even tried <strong>raw</strong> JavaScript call, same result.</p>
  <p>The same URL works perfectly fine in the browser.</p>
  <p>However when I access it from Axios, I get this error:</p>
  <p><a href="https://i.stack.imgur.com/RGgqj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RGgqj.png" alt="enter image description here" /></a>
  The raw header response:</p>
  <pre><code>GET /maps/api/place/nearbysearch/json?location=2.0978,103.6063&amp;radius=5000&amp;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/
  </code></pre>