YouTube 数据 API 查询量激增

Question

我注意到我达到了 YouTube 数据 API 的 10,000 个单位配额限制，这似乎不正确，因为我只是为我的应用提取播放列表视频。 Here's what I'm talking about.

我检查了谷歌开发者的控制台，发现我的单位使用率正在上升，所以我从 heroku 中删除了应用程序并获得了一个新密钥，它似乎已经停止了。这是使用 API 的代码。

import React, { Component } from 'react'
import { gapi } from 'gapi-script';
import '../css/YouTube.css'
import {Animated} from "react-animated-css";
import Spinner from 'react-bootstrap/Spinner'
import Button from 'react-bootstrap/Button'
import { FiArrowUpCircle } from "react-icons/fi";

export default class YouTube extends Component {
    constructor(props){
        super(props);
        this.state = {
            videos: [],
            loading: true
        };
        this.loadClient = this.loadClient.bind(this);
        this.execute = this.execute.bind(this);
        this.swap = this.swap.bind(this)
    }

    componentDidMount(){   
        gapi.load("client:auth2", function() {
            gapi.auth2.init({client_id: "Placeholder client id"});
            }); 
        this.loadClient().then(this.execute).then((array) => {
            for (let i=0; i < array.length; i++){
                array[i] = `https://www.youtube.com/embed/${array[i]}`;
            }
            this.setState({videos: array, loading: false})
        });        
    }

    swap(i1,i2){
        let tempVids = this.state.videos;
        let link1 = tempVids[i1],
        link2 = tempVids[i2];
        tempVids[i1] = link2;
        tempVids[i2] = link1;
        this.setState({videos: tempVids, loading: false})

    }

    loadClient(){
        gapi.client.setApiKey("old api key");
        return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
        .then(function() { console.log("GAPI client loaded for API"); },
        function(err) { console.error("Error loading GAPI client for API", err); });
    }

    execute(){
        return gapi.client.youtube.playlistItems.list({
            "part": [
                "snippet"
            ],
            "playlistId": "UUvgfXK4nTYKudb0rFR6noLA"
            })
                .then(function(response, array=[]) {
                        let videos = response.result.items;
                        for (let video of videos){
                            let id = video.snippet.resourceId.videoId;
                            array.push(id)
                        }
                        return array;
                    },
                    function(err) { console.error("Execute error", err);});
    }

    render() {
        return (
            <div>
                <div className='load'>
                    <>{this.state.loading ? <Spinner animation="border" role="status" variant='light'></Spinner> : <div></div>}</>
                </div>
                <Animated animationIn='fadeInLeft'>
                    <div class='videos'>
                            <iframe className='primary' title='0' width="70%" height="576" src={this.state.videos[0]} frameBorder="0" allow="accelerometer; autoplay; 
                            encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
                            <a rel="noopener noreferrer" target="_blank" href='https://www.youtube.com/user/UFC/videos'><h2>More Videos</h2></a>
                            <hr></hr>
                            <div className='bottom'>
                                <div className='secondary'>
                                    <iframe className='primary' title='1' width="315" height="auto" src={this.state.videos[1]} frameBorder="0" allow="accelerometer; autoplay; 
                                    encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
                                    <Button onClick={this.swap.bind(this,0, 1)} variant="success"><FiArrowUpCircle size='2em'></FiArrowUpCircle></Button>{' '}
                               </div>
                               <div className='secondary'>
                                    <iframe className='primary' title='2' width="315" height="auto" src={this.state.videos[2]} frameBorder="0" allow="accelerometer; autoplay; 
                                    encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
                                    <Button onClick={this.swap.bind(this,0, 2)} variant="success"><FiArrowUpCircle size='2em'></FiArrowUpCircle></Button>{' '}
                               </div>
                               <div className='secondary'>
                                    <iframe className='primary' title='3' width="315" height="auto" src={this.state.videos[3]} frameBorder="0" allow="accelerometer; autoplay; 
                                    encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
                                    <Button onClick={this.swap.bind(this,0, 3)} variant="success"><FiArrowUpCircle size='2em'></FiArrowUpCircle></Button>{' '}
                               </div>
                               <div className='secondary'>
                                    <iframe className='primary' title='4' width="315" height="auto" src={this.state.videos[4]} frameBorder="0" allow="accelerometer; autoplay; 
                                    encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
                                    <Button onClick={this.swap.bind(this,0, 4)} variant="success"><FiArrowUpCircle size='2em'></FiArrowUpCircle></Button>{' '}
                               </div>
                            </div>
                    </div>
                </Animated>
            </div>
        )
    }
}

但是我宁愿这些尖峰没有发生，在使用我的新密钥并重新部署到 heroku 之前如何防止这些尖峰发生？

Answer 1

我将所有 API 内容隐藏在 Node 服务器和环境变量中。我将服务器部署到 heroku 并从前端的服务器获取。这解决了这个问题。