Javascript Youtube api响应未提供数据

我正在尝试使用动态查询向google发出请求。我或多或少地从另一个项目复制了我的流程，在这个项目中请求工作正常。我已经在GoogleAPI仪表板上的一个新项目文件夹中“启用”了api，并使用了一个新的api密钥

首先，这里是工作版本的代码：

axios
            .get(
                `https://youtube.googleapis.com/youtube/v3/search?key=${YOUTUBE_API}&type=video&part=snippet&maxResults=1&q=${selectedTrack}`
            )
            .then((response) => {
                console.log(response);
                setVideo(response.data.items[0].id.videoId);
            })
            .catch((err) => {
                setLoading(true);
                console.log(err.response);
            });

从一个不起作用的：

const aTag = document.querySelectorAll(".movie");
    console.log(aTag);
    for (let i = 0; i < aTag.length; i++) {
        aTag[i].addEventListener("click", () => {
            const title = aTag[i].childNodes[1].alt;
            axios.get(
                `https://youtube.googleapis.com/youtube/v3/search?key=${API_KEY}&type=video&part=snippet&maxResults=1&q=${title}`
            )
                .then((response) => {
                    console.log("res", response);
                })
                .catch((err) => {
                    console.log(err.response);
                });
        });

我不是很有经验，所以我希望我错过了一些明显的东西-任何建议都是非常受欢迎的

---

更新：当我跟踪url时，它说API密钥无效。正如我所说，我已经完成了创建新的API凭据并在仪表板上启用的过程，可能还遗漏了一些东西，尽管我不完全理解，但我将把它留给可能有相同问题的任何人。最后，问题似乎在于axios没有做出应有的响应。我没有看到任何错误表明这一点，但为了让事情顺利进行，我改为不带axios的异步函数，并以这种方式获取json数据

链式链接。那么这样的链接当然不是很优雅，但下面是工作代码：

async function youtube() {
    await fetch(
        `https://www.googleapis.com/youtube/v3/search?part=snippet&key=AIzaSyDUppjf_r8veyOTZQ9PCFwlburDc9693-c&type=video&q=${title}` +
            `trailer`
    )
        .then((result) => {
            const newRes = result.json();
            return newRes;
        })
        .then((newRes) => {
            embedCode = newRes.items[0].id.videoId;
        })
        .catch((err) => {
            console.log(err.response);
        });
    const iframe = document.querySelector("iframe");
    iframe.setAttribute("src", `https://www.youtube.com/embed/${embedCode}`);
}

---

这似乎是cors的问题。也许当它将Youtube API设置为特定IP或域时，它就获得了使用该API的授权。这两种情况是否都适用于具有不同地址的应用程序？

async function youtube() {
    await fetch(
        `https://www.googleapis.com/youtube/v3/search?part=snippet&key=AIzaSyDUppjf_r8veyOTZQ9PCFwlburDc9693-c&type=video&q=${title}` +
            `trailer`
    )
        .then((result) => {
            const newRes = result.json();
            return newRes;
        })
        .then((newRes) => {
            embedCode = newRes.items[0].id.videoId;
        })
        .catch((err) => {
            console.log(err.response);
        });
    const iframe = document.querySelector("iframe");
    iframe.setAttribute("src", `https://www.youtube.com/embed/${embedCode}`);
}