未捕获YouTube（承诺）错误：请求失败，状态码为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键放在

这样的网址中

“ 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));

您还将找到一个示例here

Answer 3

通过配置/更新/启用设置来解决此问题。

过去，api密钥对我有用。当再次使用它时，我收到了403错误。

服务器可以理解我的请求，但拒绝我访问该信息。

只需进入开发人员控制台，启用api，搜索youtube，然后启用它，您的密钥即可按预期工作。