How to send request to google maps API?

Question

I have my key for google maps api and when i write the url in the browser I get the object. Now when I try to send the request from my app I get this error

Request header field Content-Type is not allowed by 
Access-Control-Allow-Headers in preflight response

I do my request with fetch

fetch(url,{
      method: "GET",
      headers: {
        "Content-Type": "application/json"
      }
    })
    .then(async res => {
          const data = await res.json();
          self.setState({
            Zone: data
          })
        })
        .catch(function(err) {
          console.log('ERROR!!! ' + err.message);
        });`

Answer 1

There is no need to set the header Content-Type in your GET request to Google's API, as you are not sending a POST request with a json body.

And since a request is by default a GET request, you can leave out the options object:

fetch(url)
.then(async res => {
  const data = await res.json()
  self.setState({
    Zone: data
  })
})
.catch(function(err) {
  console.log('ERROR!!! ' + err.message)
})

Answer 2

There are 2 ways how you can solve your error. The first is using a chrome extension to allow CORS: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

The second option is installing the cors npm package and using that inside your javascript