为什么我的 API 即使使用 X-RapidAPI-Key 也返回"您未订阅此 APi"？

Question

到我的rapidAPI的链接在下面

https://rapidapi.com/ytdlfree/api/youtube-v31?utm_source=youtube.com%2FJavaScriptMastery

这是我的RAPID API代码：

import axios from "axios";
const BASE_URL = 'https://youtube-v31.p.rapidapi.com';
const options = {
params: {
maxResults: '50'
},
headers: {
'X-RapidAPI-Key': process.env.REACT_APP_RAPID_API_KEY,
'X-RapidAPI-Host': 'youtube-v31.p.rapidapi.com'
}
};
export const fetchFromAPI = async(url) =>{
const { data } = await axios.get(`${BASE_URL}/${url}`, options);
return data;
}

这是为了获取数据：

import { fetchFromAPI } from '../utils/fetchFromAPI';
const Feed = () => {
const [selectedCategory, setSelectedCategory] = useState('New');
const [videos, setVideos] = useState([]);
useEffect (() =>{
fetchFromAPI(`search?part=snippet&q=${selectedCategory}`)
.then((data) => setVideos(data.items))
.catch(error => {
if (error.response) {
// Request made but the server responded with an error
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// Request made but no response is received from the server.
console.log(error.request);
} else {
// Error occured while setting up the request
console.log('Error', error.message);
}
});

我将API密钥保存到该应用程序根目录下的.env文件中，但它一直显示消息：

您尚未订阅此API
[[Prototype]]

对象

如何解决此问题？

Answer 1

首先您需要订阅API密钥。。

第二个，使用env变量，如下所示。。

**REACT_APP_RAPID_API_KEY = '9fbc4844e8msfdf8absdzgd3ffp182459jsdfdsf909d079cdds'**

不要像这样在env变量的末尾放分号或任何东西。。

REACT_APP_RAPID_API_KEY = '9fbc4844e8msfdf8absdzgd3ffp182459jsdfdsf909d079cdds';

此外，尝试在控制台中记录env变量，如。。

console.log(process.env.RREACT_APP_RAPID_API_KEY(；

更改env文件后尝试重新启动服务器。。。

yarn start / npm start 

Answer 2

在JSM Youtube_Clone项目之后，我也遇到了同样的问题。解决方案是从自定义配置文件中提取密钥，而不是.env:

1. 创建一个config.js文件，并将密钥存储在此处，而不是作为环境变量

//config.js file
export const REACT_APP_RAPID_API_KEY = " *your_key_here* ";

2. 从配置中检索密钥，并在需要时导入

import { REACT_APP_RAPID_API_KEY } from "./config";

并将其用于"；选项"；功能->标题为：

'X-RapidAPI-Key': REACT_APP_RAPID_API_KEY,

然而，这是一个临时解决方案，可以继续执行项目(因为Api_key不受保护(，并且process.env.key在这种情况下不起作用。我找不到"为什么"；。