CODEWITHSUNDEEP
mapsgeocodinghere-apigeocode
user3744437
user3744437

Reputation: 5

Here Maps Geocode API leads to Cross-Origin error

I use the first example here in order to get the geo coordinates based on an address: https://developer.here.com/documentation/maps/3.1.15.1/dev_guide/topics/geocoding.html

My JavaScript coding looks almost the same as in the official documentation:

var platform = new H.service.Platform({
  'apikey': 'HERE IS MY API KEY'
});

// Get an instance of the geocoding service:
var service = platform.getSearchService();

service.geocode({
  q: 'Berlin'
}, (result) => {
  result.items.forEach((item) => {
    console.log("test");
  });
}, alert);

However, when the geocode request is sent, I get the following error:

Access to XMLHttpRequest at '**https://geocode.search.hereapi.com/v1/geocode?xnlp=CL_JSMv3.1.16.1&apikey=[HERE IS MY API KEY]&q=Berlin**' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The API key is sent correctly, why do I still get the CORS error? If I enter the request URL manually in the browser, I get a response and everything is fine.

Upvotes: 0

Views: 1170

Answers (2)

vadym1930
vadym1930

Reputation: 76

Yes, the server will help with the issue. I'm here to suggest the alternative.

You can do the geocoding with the HERE Maps REST as well see docs — https://developer.here.com/documentation/geocoding-search-api/dev_guide/topics/endpoint-geocode-brief.html.

Since not all the browsers historically support the CORS (learn more about the CORS — https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) there is an approach, called JSONP. See some JSONP explanation Here Maps related in the old docs https://developer.here.com/documentation/places/dev_guide/topics/request-cross-domain-js.html.

Eventually the https://www.npmjs.com/package/jsonp npm package could be a good follow up and we can get something like this after installing the package (npm install jsonp --save).

import jsonp from 'jsonp';


jsonp('https://geocode.search.hereapi.com/v1/geocode?q=5+Rue+Daunou%2C+75000+Paris%2C+France&apiKey=my-api-key', 
null, 
(err, data) => {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});

This works great from my experience.

Upvotes: 1

Shruti Kuber
Shruti Kuber

Reputation: 397

If you are testing this code by opening the file in the browser, you may get this error. I suggest using a local server for testing.

Upvotes: -1

Related Questions