未捕获(在承诺中)AxiosError:请求失败,状态代码为403

v6ylcynt  于 2022-12-12  发布在  iOS
关注(0)|答案(1)|浏览(458)

目标:我使用Youtube v3 RapidAPI为我的React + Vite.js项目获取“建议的视频”数据。但是,出现了一个错误,我不知道该怎么做,根文件夹中的文件. env,语法都是正确的(见下面的照片)。也许问题出在process.env中。但我不知 prop 体是什么。package.json中的所有依赖项都是最新的。另外,我登录并订阅了RapidAPI。

如何从RapidAPI获取数据

import axios from 'axios';

const NODE_ENV = process.env.NODE_ENV;
const BASE_URL = 'https://youtube-v31.p.rapidapi.com';

const options = {
    params: {
        maxResults: '50'
    },
    headers: {
        'X-RapidAPI-Key': NODE_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, { useState, useEffect } from 'react';
import { Box, Stack, Typography } from '@mui/material';
import { fetchFromAPI } from '../utilities/fetchFromAPI';
import { Videos } from './';

function Feed() {
    const [selectedCategory, setSelectedCategory] = useState('New');
    const [videos, setVideos] = useState([]);

    useEffect(() => {
        fetchFromAPI(`search?part=snippet&q=${selectedCategory}`)
            .then((data) => setVideos(data.items));

    }, [selectedCategory]);

    return (
          <Videos videos={videos} />    
    )
}

export default Feed;

照片:How Error looks like:My Directory
.env文件:

REACT_APP_RAPID_API_KEY='91766d6993msh3bd85c80e2cd0a0p118319jsn781536a29badqsw'
pdtvr36n

pdtvr36n1#

您可以通过以下方式访问env变量

const envValue = process.env.REACT_APP_RAPID_API_KEY;

而不是process.env.NODE_ENV.REACT_APP_RAPID_API_KEY
NODE_ENV是一个字符串类型,所以当从string值访问REACT_APP_RAPID_API_KEY时,会出现类型错误。
另外,process.env.NODE_ENV表示当前节点的模式,即通常为productiondevelopmenttest

相关问题