我正在使用 Rapid API 中的 API，但在发送请求时出现错误答案

【问题标题】：I'm using an API from Rapid API but I'm getting an error when I send requests我正在使用 Rapid API 中的 API，但在发送请求时出现错误
【发布时间】：2023-02-15 14:57:20
【问题描述】：

我正在尝试使用 Rapid API 中的 youtube API，但是当我使用 Axios 发送请求时，出现 403 和 429 错误 [错误][1]

这是我的 API fetchData

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 React from "react";
import { useEffect, useState } from "react";
import { Box, Stack, Typography } from "@mui/material";
import { Sidebar, Videos } from "./index";

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)
    );
  }, [selectedCategory]);

  return (
    <Stack sx={{ flexDirection: { sx: "column", md: "row" } }}>
      <Box
        sx={{
          height: { sx: "auto", md: "92vh" },
          borderRight: "1px solid #3d3d3d",
          paddingX: { sx: 0, md: 2 },
        }}
      >
        <Sidebar
          selectedCategory={selectedCategory}
          setSelectedCategory={setSelectedCategory}
        />
        <Typography
          calssName="copyright"
          variant="body2"
          sx={{ mt: 1.5, color: "#fff" }}
        >
          Copyright &copy; 2022 YT Clone Made By Abdulrahman
        </Typography>
      </Box>
      <Box p={2} sx={{ overflow: "auto", height: "90vh", flex: 2 }}>
        <Typography variant="body2" sx={{ color: "white", mb: 2 }}>
          <span
            style={{ color: "#F31503", fontSize: "2rem", fontWeight: "bold" }}
          >
            <span style={{ color: "white" }}>{selectedCategory} </span>
            Videos
          </span>
        </Typography>
        <Videos videos={videos} />
      </Box>
    </Stack>
  );
};

export default Feed;

注意：我在设计中使用了 materialUI (@mui/material)[1]:https://i.stack.imgur.com/DqiPi.png

【问题讨论】：

这看起来像是您没有在快速 api 帐户中订阅 api 时遇到的错误。

标签： javascript reactjs api axios rapidapi

【解决方案1】：

我也遇到了类似的问题，现在可以了。

headers: {
    "X-RapidAPI-Key": **process.env.REACT_APP_RAPID_API_KEY,**
    "X-RapidAPI-Host": "youtube-v31.p.rapidapi.com",
  },

您可以将“process.env.REACT_APP_RAPID_API_KEY”替换为您在 .env 文件中设置的硬编码密钥。

例如像这样

headers: {
        'X-RapidAPI-Key': `**f40bb900a8msh2675005f65b1b85p107114jsn879dac4fc413**`,
        'X-RapidAPI-Host': 'youtube-v31.p.rapidapi.com',
    }

【讨论】：