HERE-maps CORS problems with Autocomplete

Question

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.

Can you paste all the errors logged in the browser javascript console? — Michel, Dec 12 '18 at 16:25
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. Access to XMLHttpRequest at 'http://autocomplete.geocoder.cit.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. — Irina Vdomike, Dec 12 '18 at 17:49
We have here another example for the Autocomplete for the JS API: https://tcs.ext.here.com/examples/v3/geocoder_autocomplete — , Dec 19 '18 at 08:53
Hi Irina, did you manage to figure it out? As I am hitting this problem also. Still no response from HERE support and there is nothing in the documentation either. Thank you — Glenster, Aug 14 '19 at 09:15

score 3 · Accepted Answer · answered Sep 18 '19 at 11:16

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.

score 0 · Answer 2 · answered Mar 30 '20 at 14:59

0

For those who have defined by default the header : 'Content-Type': 'application/json'

You must deactivate it, there should not be any HttpHeaders on the call request to Here API services.

answered Mar 30 '20 at 14:59

Xavier Brassoud

697
6
14

score -4 · Answer 3 · answered Dec 12 '18 at 18:01

-4

temporary install Allow-Control-Allow-Origin google chrome plugin .. installed then you can show top right side click on that and switch the button then refresh then again call your api and get the response.

answered Dec 12 '18 at 18:01

user2742930

1

This doesn't exactly answer the question, but is a workaround. One that probably won't work if this code is being developed for consumption by anyone else but the author. – Jon Adams Dec 13 '18 at 03:21

HERE-maps CORS problems with Autocomplete

3 Answers3