CODEWITHSUNDEEP
javascriptpostmanruntime-errorrapidapi
StephenE
StephenE

Reputation: 41

Getting error, invalid API key in postman via RapidAPI

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>

Upvotes: 3

Views: 7635

Answers (1)

Pratham
Pratham

Reputation: 537

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)

Upvotes: 1

Related Questions