YouTube Video Search Tutorial


#1

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?