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

我将请求标头中的content-type设置为application / json，临时标头已更改

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

因此，如果我理解正确，我应该设置x-auth-token标头。但是我在哪里可以拿到这个令牌？还是这个问题还有另一个原因？

文档中没有关于此类问题的任何信息。

Answer 1

问题很简单，有点愚蠢。当用户在我的应用中通过身份验证时，我向axios添加了默认标头

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

因此此标头已发送到所有请求。

但是HERE-map API不需要请求中的标头，这就是问题的原因。解决方案是从对HERE-map API的请求中删除此标头。

Answer 2

对于那些默认已定义标头的人： 'Content-Type': 'application/json'

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

Answer 3

已临时安装Allow-Control-Allow-Origin Google chrome插件..您可以显示右上角，然后单击该按钮并切换按钮，然后刷新，然后再次调用您的api并获得响应。

使用自动完成功能在此处映射CORS问题

3 个答案: