这里 Maps Geocode API 导致跨源错误

Question

我在这里使用第一个示例来获取基于地址的地理坐标： https://developer.here.com/documentation/maps/3.1.15.1/dev_guide/topics/geocoding.html

我的JavaScript编码看起来和官方文档中的几乎一样：

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);

但是，发送地理编码请求时，出现以下错误：

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.

API密钥发送正确，为什么还是出现CORS错误？如果我在浏览器中手动输入请求 URL，我会收到响应并且一切正常。

Answer 1

如果您通过在浏览器中打开文件来测试此代码，您可能会遇到此错误。我建议使用本地服务器进行测试。

Answer 2

是的，服务器会帮助解决这个问题。我在这里建议替代方案。

您可以使用 HERE Maps REST 进行地理编码，也可以查看文档 — https://developer.here.com/documentation/geocoding-search-api/dev_guide/topics/endpoint-geocode-brief.html。

由于历史上并非所有浏览器都支持 CORS（了解有关 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。

最终 https://www.npmjs.com/package/jsonp npm 包可能是一个很好的跟进，我们可以在安装包后得到类似的东西 (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);
  }
});

根据我的经验，这非常有效。

这里 Maps Geocode API 导致跨源错误

Here Maps Geocode API leads to Cross-Origin error

maps

geocoding

geocode

here-api