如何使用 axios 发送 api 密钥答案

【问题标题】：How to send api key with axios如何使用 axios 发送 api 密钥
【发布时间】：2021-10-07 18:12:30
【问题描述】：

我试图从这个 api https://api.rajaongkir.com/starter/province 和 api 密钥获取数据，我已经在请求数据时正确放置了我的 api 密钥。但响应是无效键。

这是我的代码：

这是回复

编辑

没看懂，用邮递员就好了

【问题讨论】：

我尝试通过代理使用相同的 API 密钥重新发送相同的请求，但我仍然收到相同的错误，我认为问题来自您的 API 密钥，我希望此 API 密钥用于示例
@KhaledNassar API 密钥可能有误，但在这里，问题在密钥验证之前，这是一个 CORS 问题。至于卢克：必须在 Postman 上运行它是有效的，因为这不被视为前端，因此很好。如果您确实在 Node.js 环境中使用它，查询将以相同的方式工作。 CORS 问题仍然存在，您首先需要处理这个问题。

标签： vue.js axios nuxt.js

【解决方案1】：

不起作用的是带有“OPTIONS”HTTP 类型的 prefligth 请求。

此请求由您的浏览器直接完成。一种解决方案是在 NoeJS 服务器上执行请求并将数据发送回客户端。

无论如何，您都不应该将您的 API 密钥提供给客户端。

【讨论】：

仍然出现 400 错误。我尝试使用具有相同 api 密钥的邮递员获取数据。它工作正常
@Luke 找到了问题，完全重写了答案，是因为浏览器调用了 OPTIONS
API 密钥可能是公开的，就像现在很多一样。即使 Node.js 中间件可以工作，这也是一种解决方法，并且将客户端列入白名单仍然是恕我直言的方法。
@CharybdeBE 是的，我不应该在前端请求。谢谢

【解决方案2】：

所以，我努力为您输入图像代码作为文本，总体如下：

console.log(
  'test',
  this.$axios.$get('https://api.rajaongkir.com/starter/province', {
    headers: { key: '00958fbcc8a7d31edf4bc2c168de705c' },
  }),
)

下次请以文字而非图片的形式提供。

同样，作为mentioned above，您可以看到这个问题实际上是一个 CORS 问题。

要正确解决此问题，您需要在 Rajaongkir 的仪表板某处将您的域名和本地主机列入白名单。

PS：一旦问题得到解决，我建议您重新创建一个全新的 API 密钥，因为该密钥现已公开。

【讨论】：