Daniel
Daniel

Reputation: 15393

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.

Upvotes: 2

Views: 9515

Answers (4)

Yousef Roshandel
Yousef Roshandel

Reputation: 340

for some users, this error might be because of cause sanctions. so try to run your project using a DNS or VPN.

Upvotes: 0

user2697389
user2697389

Reputation: 59

Solved this by configure/updating/enabling the settings.

The api key worked in the past for me. When returning to use it again, i received a 403 error.

The server understood my request, but denied me access to the info.

Just go into developers console, go to enable apis, search youtube, and enable it, your key will now work as expected.

enter image description here

Upvotes: -1

mooga
mooga

Reputation: 3297

Put your Api key in url like

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

You will find an example as well here

Upvotes: 3

Mark
Mark

Reputation: 2071

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

Upvotes: 2

Related Questions