Search code examples
here-api

HERE-maps CORS problems with Autocomplete

I want to use HERE maps autocomplete in my project. But when a i send request like the one in documentation

this.axios.get('http://autocomplete.geocoder.api.here.com/6.2/suggest.json
  ?app_id={YOUR_APP_ID}
  &app_code={YOUR_APP_CODE}
  &query=Pariser+1+Berl
  &beginHighlight=<b>
  &endHighlight=</b>'
  )
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

i get an error

OPTIONS http://autocomplete.geocoder.api.here.com/6.2/suggest.json?{...} 405
Access to XMLHttpRequest at 'http://autocomplete.geocoder.api.here.com/6.2/suggest.json?{...}' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

In Chrome developer console in network panel i check this 

Provisional headers are shown
Access-Control-Request-Headers: x-auth-token, content-type
Access-Control-Request-Method: GET

I set content-type in request headers to application/json and Provisional headers changed 

to Access-Control-Request-Headers: x-auth-token
Access-Control-Request-Method: GET

So if i understand right, i should set x-auth-token header. But where can i take this token? Or may be this problem has another reason?

There's nothing about such problems in documentaion.

Solution

  • The problem was simple and a bit stupid. When user authenticated in my app I added default header to axios

    axios.defaults.headers.common['X-Auth-Token'] = token

    so this header was sended to all requests.

    But HERE-map API doesn't want this header in requests and this was the cause of the problem. The solution was to remove this header from requests to HERE-map API.