Google Maps API: No 'Access-Control-Allow-Origin' header is present on the requested resource

I've seen this question asked by multiple people, none of the answers have worked for me.

I'm trying to make an API call to the google maps api with react/axios.

This is my get request:

componentDidMount() {
  axios({
   method : 'get',
   url : `http://maps.googleapis.com/maps/api/js?key=${key}/`,
   headers: {
     "Access-Control-Allow-Origin": '*'
     "Access-Control-Allow-Methods": 'GET',
   },
  })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });
}

This is the error msg:

XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/js?
key=xxxxxxxxx/. Response to preflight request doesn't pass access control 
check: No 'Access-Control-Allow-Origin' header is present on the 
requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

I've read the article con CORS that everyone else points to https://www.html5rocks.com/en/tutorials/cors/

but I can't find an answer to my problem there.