Youtube API Uncaught (in promise) Error: Request failed with status code 403

I am attempting to integrate the YouTube API into a new Vuejs application and I am testing it in the browser and continuing to get a 404 error.

I did have a www missing, but I continue to get this same error when I make the request. Is there something I am not seeing in my code that is wrong? Is it a cors issue? If so, what is the standard practice for resolving this in Vuejs? I have made a similar application in Reactjs and did not run into this issue.

<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>

I did notice in the response I got this message:

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

I am not sure what this means.

Answer

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

This means that you have exceeded your limit to serve videos from youtube. You need to create an account to be able to show more videos.

If you’re sure you haven’t exceeded your limit/ have an account double check your developer console that the API is turned on. Developer Console.

What I would suggest is to add a catch to your call to handle errors in the future.

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