HERE Geocoding API - 在我的 React 应用程序中不起作用答案

【问题标题】：HERE Geocoding API - not working inside my React appHERE Geocoding API - 在我的 React 应用程序中不起作用
【发布时间】：2021-01-07 10:06:14
【问题描述】：

我有一个使用 HERE 地理编码 API 的 React 应用程序。我有一个 axios 请求来检索纬度和经度，但它没有像预期的那样工作。该请求在我的应用程序中不起作用

return axios.get(`https://geocode.search.hereapi.com/v1/geocode?q=${address}&apiKey=myAPIKey`)

我遇到了 401 错误。 Bearer token invalid. Bearer missing or bearer value missing. 如果我在浏览器中打开一个新选项卡并粘贴 url https://geocode.search.hereapi.com/v1/geocode?q=${address}&apiKey=myAPIKey 它工作正常，我会得到我需要的结果。

我尝试使用授权标头

    const config = {
        headers: {
            'Accept': 'application/json',
            'Authorization': `apiKey myAPIKey`,
        }
    };
    return axios.get(`https://geocode.search.hereapi.com/v1/geocode?q=${address}&apiKey=myAPIKey`,config)

在 Authorization 标头中，我尝试使用 Bearer 和 Basic 而不是 apiKey

documentation HERE API

在有关如何创建 API 密钥以及如何使用它的文档中，我唯一需要做的就是我已经完成的工作。我创建了一个项目、一个 API 密钥并在我的请求中使用它。

HERE Geocoding API Key

【问题讨论】：

您好，请尝试将标题设置为“标题：{}”？

标签： reactjs geocoding here-api

【解决方案1】：

我不知道 HERE api 是如何工作的，但错误消息可能是您正在寻找的答案。

您可能会通过 Authorization 标头在您的请求中提供 api 密钥。阅读MDN上的标题

【讨论】：

它说我的不记名令牌无效，但我没有任何不记名令牌...我尝试使用我的 API 密钥作为值添加基本和不记名的授权标头，但它不起作用. api key应该够了吧？
文档是怎么说的？
developer.here.com/documentation/identity-access-management/… 1：注册你的应用 - 我已经创建了我的项目，2：获取 API Key - 我创建了 API 密钥，3：使用 API Key - 我可以直接在浏览器，但不在我的应用中

【解决方案2】：

您只需在链接中将您的 API 密钥作为参数传递。只需注册即可获得您的 API 密钥。 https://developer.here.com/sign-up

代码应该是这样的。

return axios.get(`https://geocode.search.hereapi.com/v1/geocode?q=${address}&apiKey=${HERE_MAP_API_KEY}`,config)

最新的请求如下所示。

axios.get(`https://geocoder.ls.hereapi.com/search/6.2/geocode.json?languages=en-US&maxresults=${maxResults}&searchtext=${query}&apiKey=${HERE_MAP_API_KEY}`)
    .then(res => {
      const data = res.data
      console.log(data)
    })
    .catch(err => console.log(err))

【讨论】：