HERE-maps 自动完成的 CORS 问题

Question

我想在我的项目中使用 HERE 地图自动完成功能。但是当我像文档中的那样发送请求时

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

我收到一个错误

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.

在 Chrome 网络面板的开发者控制台中，我检查了这个

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

我在请求 headers 中将 content-type 设置为 application/json 并且临时 headers 已更改

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

所以如果我理解正确的话，我应该设置x-auth-token header。但是我可以在哪里拿这个令牌呢？或者这个问题可能有其他原因？

文档中没有关于此类问题的内容。

Answer 1

临时安装 Allow-Control-Allow-Origin google chrome 插件 .. 安装然后你可以显示右上角点击它并切换按钮然后刷新然后再次调用你的 api 并得到响应。

Answer 2

问题很简单，有点傻。当用户在我的应用程序中进行身份验证时，我将 default header 添加到 axios

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

所以这个 header 已发送给所有请求。

但是 HERE-map API 不想在请求中使用这个 header，这就是问题的原因。解决方案是从 HERE-map API.

的请求中删除此 header

Answer 3

对于那些默认定义了 header 的人： 'Content-Type': 'application/json'

您必须停用它，对这里 API 服务的调用请求中不应有任何 HttpHeader。

HERE-maps 自动完成的 CORS 问题

HERE-maps CORS problems with Autocomplete

here-api