Getting a 403 error while using Axios in React - reactjs

Question

Hey great people of StackOverflow,
I'm creating a React app that uses the Google API, and I'm getting a 403 error when I use the search tool I've built, here's the following code:
import axios from 'axios';
const KEY = 'API KEY';
export default axios.create({
baseURL: 'http://www.googleapis.com/youtube/v3',
params: {
part: 'snippet',
maxResults: 5,
key: KEY
}
});
That's the API component to my React project, in my App.js, the callbacks look like this:
import React from 'react';
import SearchBar from './SearchBar';
import youtube from '../apis/youtube';
class App extends React.Component {
onTermSubmit = (term) => {
youtube.get('/search', {
params: {
q: term
}
});
};
I thought it might have been one of the EventHandlers not going through with "submit" but that wasn't the case as I was able to look at the Dev Console and I isolated XHR requests in the Network, and this is what I got:
Request URL: http://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=5&key=MYAPIKEY
Request Method: GET
Status Code: 403 Forbidden
Any help would be greatly appreciated, thank you folks in advance.

Answer 1

friend!)
Yes, you're absolutely right — "submit" EventHandlers are okay as well as your app logic!
But for search-request we shouldn't use API KEY because everyone (even unauthorized user) can just search something in Google, cannot he? :)
So, in this term, you should remove the key property in your request:
import axios from 'axios';
const KEY = 'API KEY';
export default axios.create({
baseURL: 'http://www.googleapis.com/youtube/v3',
params: {
part: 'snippet',
maxResults: 5
}
});
That's all, my friend!) Good luck to you!