Youtube API未捕获（在承诺中）错误：请求失败，状态码为403

Question

我正在尝试将YouTube API集成到新的Vuejs应用程序中，我正在浏览器中对其进行测试并继续收到404错误。

我确实丢失了www，但是当我提出请求时，我仍然会遇到同样的错误。我的代码中有没有看到错误的东西？这是一个角色问题吗？如果是这样，在Vuejs解决这个问题的标准做法是什么？我在Reactjs中做了类似的应用程序，并没有遇到这个问题。

<template>
  <div>
    <SearchBar @termChange="onTermChange"></SearchBar>
  </div>
</template>

<script>
import axios from "axios";
import SearchBar from "./components/SearchBar";
const API_KEY = "<api_key>";

export default {
  name: "App",
  components: {
    SearchBar
  },
  methods: {
    onTermChange(searchTerm) {
      axios
        .get("https://www.googleapis.com/youtube/v3/search", {
          params: {
            keys: API_KEY,
            type: "video",
            part: "snippet",
            q: searchTerm
          }
        })
        .then(response => console.log(response));
    }
  }
};
</script>

我在回复中注意到我收到了这条消息：

"code": 403,
  "message": "Daily Limit for Unauthenticated Use Exceeded. Continued use requires signup."
 }
}

我不确定这意味着什么。

Answer 1

"code": 403,
  "message": "Daily Limit for Unauthenticated Use Exceeded. Continued use requires signup."
 }
}

这意味着您已超出限制，可以从youtube投放视频。您需要创建一个帐户才能显示更多视频。

如果您确定没有超出限制/拥有一个帐户，请检查您的开发者控制台是否已打开API。 Developer Console。

我建议在你的电话中添加一个catch来处理将来的错误。

axios
  .get("https://www.googleapis.com/youtube/v3/search", {
    params: {
      keys: API_KEY,
      type: "video",
      part: "snippet",
      q: searchTerm
    }
  })
  .then(response => console.log(response));
  .catch(err => { console.log(err); }

Answer 2

把你的Api密钥放在url中

“Qazxswpoi”

https://www.googleapis.com/youtube/v3/search?key=YOUR_API_KEY

你会找到一个例子

axios.get("https://www.googleapis.com/youtube/v3/search?key=Your_Api_Key", {
          params: {
            type: "video",
            part: "snippet",
            q: searchTerm
          }
        })
        .then(response => console.log(response));