为什么它说我使用 RapidAPI 的 API 密钥无效？答案

【问题标题】：Why does it say that I have an invalid API key with RapidAPI?为什么它说我使用 RapidAPI 的 API 密钥无效？
【发布时间】：2021-03-11 22:14:29
【问题描述】：

我刚刚开始学习如何使用 API。对于我的第一个项目，我决定使用 RapidAPI 市场，但我遇到了一个问题。我尝试在邮递员中测试 API，但它说由于某种原因我有一个无效的 API 密钥，尽管我很确定我没有。在 chrome 控制台上，它给了我如图所示的错误：

它基本上说服务器以状态 404 的错误响应。我还有一个配置文件来存储 api 密钥。基本上是这样的：

const API_KEY = "randomlettersandnumbers";

export {API_KEY};

我在 VSCode 上使用 LiveServer 扩展。这就是我的文件夹在 VSCode 上的样子：

我的其余代码如下所示：

import {API_KEY} from './config';

fetch("https://community-open-weather-map.p.rapidapi.com/weather?q=London%2Cuk&lat=0&lon=0&callback=test&id=2172797&lang=null&units=%22metric%22%20or%20%22imperial%22&mode=xml%2C%20html", {
    "method": "GET",
    "headers": {
        "x-rapidapi-key": API_KEY,
        "x-rapidapi-host": "community-open-weather-map.p.rapidapi.com"
    }
})
.then(response =>response.json())
.then(response => {
    console.log(response);
    console.log(response.content);
})
.catch(err => {
    console.error(err);
});

<!doctype html>
<html lang="en">
  <head>
    <title>API Example</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
      This better work!
    <script src = "js/main.js" type = "module"></script>
  </body>
</html>

【问题讨论】：

尝试在模块导入中包含文件扩展名，即import { API_KEY } from "./config.js"。您没有使用捆绑器，因此没有模块文件扩展解析
谢谢，这似乎解决了一个问题，但这是我得到的新错误：SyntaxError: Unexpected token e in JSON at position 1 main.js:16.
听起来响应不是 JSON。您可以使用浏览器的开发工具 Network 面板来检查请求和响应

标签： javascript api runtime-error rapidapi

【解决方案1】：

X-RapidAPI-Key 是您的 API 密钥，用于验证您的请求。这是 RapidAPI 提供的唯一且唯一的 API 密钥。如果您在浏览器中生成代码 sn-p，您的 API 密钥将自动出现在生成的代码中。您还可以在 Developer Dashboard 的应用程序的安全页面上找到 API 密钥。

几个步骤可以帮助你：

尝试使用.env 文件。
尝试将 config.js 文件修改为此 var config = { API_KEY : '1234' }，然后在您的 javascript 下方但在您自己的脚本文件链接上方的脚本链接到此文件。然后像这样使用您的 API 密钥：let key = config.API_KEY;
尝试轮换 RapidAPI 密钥 (https://docs.rapidapi.com/docs/keys)

【讨论】：