API Key Authentication Problem with RapidAPI
I’m new to working with APIs and chose RapidAPI as my starting point. However, I keep running into authentication issues when testing my requests in Postman. The error message indicates my API key is invalid, but I’ve double-checked it multiple times.
The browser console shows a 404 status error when I make the request. Here’s my current setup:
Configuration file (settings.js):
const SECRET_KEY = "abc123def456ghi789";
export {SECRET_KEY};
Main application code:
import {SECRET_KEY} from './settings.js';
fetch("https://weatherapi-com.p.rapidapi.com/current.json?q=Paris", {
"method": "GET",
"headers": {
"X-RapidAPI-Key": SECRET_KEY,
"X-RapidAPI-Host": "weatherapi-com.p.rapidapi.com"
}
})
.then(data => data.json())
.then(result => {
console.log(result);
console.log(result.data);
})
.catch(error => {
console.error(error);
});
HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather API Test</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Testing API Connection</h1>
</div>
<script src="app.js" type="module"></script>
</body>
</html>
I’m using Live Server in VS Code for development. What could be causing this authentication failure?