1

I just got started on learning how to use APIs. For my first project, I decided to use RapidAPI marketplace, but I'm having an issue. I tried testing the API in postman, but it says I have an invalid API key for some reason even though I'm pretty sure that I don't. On the chrome console, it gives me the error as shown in the image:

enter image description here

It basically says that the server responded with an error of status 404. I also have a config file to store the api key. It basically looks like this:

const API_KEY = "randomlettersandnumbers";

export {API_KEY};

I'm using the LiveServer extension on VSCode. This is how my folders look like on VSCode:

enter image description here

The rest of my code looks like this:

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>
Phil
  • 157,677
  • 23
  • 242
  • 245
StephenE
  • 21
  • 1
  • 4
  • Try including the file extension in your module import, ie `import { API_KEY } from "./config.js"`. You're not using a bundler so there's no module file-extension resolution – Phil Mar 11 '21 at 22:17
  • Thanks, that seemed to resolve a problem, but this is the new error that I'm getting: SyntaxError: Unexpected token e in JSON at position 1 main.js:16. – StephenE Mar 12 '21 at 05:28
  • Sounds like the response isn't JSON. You can use your browser's dev tools _Network_ panel to inspect the request and response – Phil Mar 12 '21 at 22:21

1 Answers1

1

X-RapidAPI-Key is your API key to authenticate your request. This is the only and unique API Key that RapidAPI provides. Your API key will automatically appear in the generated code if you generate a code snippet within the browser. You can also find the API key on the Security page of your application on the Developer Dashboard.

A few steps that can help you:

  • Try using the .env file.
  • Try modifying config.js file to this var config = { API_KEY : '1234' } and then script link to this file below your javascript but above your own script file links. And then use your API key like this: let key = config.API_KEY;
  • Try rotating RapidAPI key (https://docs.rapidapi.com/docs/keys)
Pratham
  • 497
  • 3
  • 7