I am working through a course Projects in JavaScript and JQuery (published in 10/2014) as part of my learning more about how to apply JavaScript to actual projects. The third project in this course is a Search feature using the YouTube Data API (V3). I am getting an error that I can’t figure out how to resolve: “Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https: // www.googleapis .com/youtube/v3/search?part=snippet%2C+id&q=cats&type=video&key=*****my API key was entered here ***** . (Reason: CORS request did not succeed).”.
My search function is as follows:
// the search function
function search() {
// clear results
$('#results').html('');
$('#buttons').html('');
// get form input
q = $('#query').val();
// run GET request on API
$.get(
"https://www.googleapis.com/youtube/v3/search", {
part: 'snippet, id',
q: q,
type: 'video',
key: '***** my API key was entered here *****'},
function(data) {
let nextPageToken = data.nextPageToken;
let prevPageToken = data.prevPageToken;
console.log(data);
}
);
}
I’m pretty sure I got and used the correct API key.
I have asked for help in the Q&A section of the course, but have not yet received a response, and I would really like to finish off this project and move on. What is causing this error, and how can I fix it?