How to fix CORS Header error: "No 'Access-Control-Allow-Origin' header is present on the requested resource" in flutter

Question

I have recently made an app using google maps nearby places API but when ever I make a call to the API i get the following error: "Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?&location=lat,lon&radius=1000&key=key' from origin 'http://localhost:50940' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

I have read up and have manually put in the headers like so

 Future<NearbyLocationsData?> get() async {
    NearbyLocationsData results;
    final corsHeaders = {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "POST, GET, OPTIONS, PUT, DELETE, HEAD",
    };
    
    final url = Uri.parse(
        "https://maps.googleapis.com/maps/api/place/nearbysearch/json?&location=$lat,$lon&radius=$radius&key=$key");

    var response = await http.get(url, headers: corsHeaders);
    if (response.statusCode == 200) {
      String json = response.body;
      results = nearbyLocationsDataFromJson(json);
      return results;
    } else {
      return null;
    }
  }

The header does show up on the request on the network tab

I have disabled CORS for localhost and it works then but when I host the app through Firebase, the error is still there.

Any ideas what I'm doing wrong?