How to solve CORS issue when hitting google map api from flutter web?

Question

I am using Google map API for Location Autocomplete feature. To fetch the locations I use https://maps.googleapis.com/maps/api/place/autocomplete/jsontype=geocode&language=de&key=API_KEY&input=puratchi from the client side(Flutter Web).

Function for hitting this API:

Future<List<Prediction>> fetchingAutocomplete(String searchText) async {
  Uri autocompleteUri = Uri.parse(
      "https://maps.googleapis.com/maps/api/place/autocomplete/json?type=geocode&language=${kLanguageCode.value}&key=$kGoogleApiKey&input=$searchText");
  Response response = await GetConnect().get("$autocompleteUri",headers: {"Content-Type": "application/json"});
  if (response.statusCode == 200) {
    return AutocompleteModel.fromJson(response.body).predictions;
  } else {
    return AutocompleteModel.fromJson({}).predictions;
  }
}

Also I Tried This:

Future<List<Prediction>> fetchingAutocomplete(String searchText) async {
  final client = dio.Dio();
  // Add an interceptor to set headers before each request
  client.interceptors.add(dio.InterceptorsWrapper(
    onRequest: (dio.RequestOptions options, dio.RequestInterceptorHandler handler) {
      options.headers['Access-Control-Allow-Origin'] = 'https://angular.babelonia.nl';
      options.headers['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS';
      options.headers['Access-Control-Allow-Headers'] = 'Content-Type';
      options.headers['Access-Control-Allow-Credentials'] = 'true';
      handler.next(options);
    },
  ));
  Uri autocompleteUri = Uri.parse(
      "https://maps.googleapis.com/maps/api/place/autocomplete/json?type=geocode&language=${kLanguageCode.value}&key=$kGoogleApiKey&input=$searchText");
  dio.Response response = await client.get("$autocompleteUri", options: dio.Options(headers: {"Content-Type": "application/json"}));
  if (response.statusCode == 200) {
    return AutocompleteModel.fromJson(response.data).predictions;
  } else {
    return AutocompleteModel.fromJson({}).predictions;
  }
}

When I tried this in mobile application it was working fine. But When I tried to hit it from flutter web it throws CORS issue. I removed all the restrictions on the google console. Also configured my nginx server CORS Policy.

This is what I added on the server side:

location / {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
    add_header 'Access-Control-Allow-Headers' 'Content-Type';
    add_header 'Access-Control-Allow-Credentials' 'true';
}

The preflight request have no issue and I can see the above headers in the request header. But the FETCH/XHR is getting failed and throw the below CORS error.

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/autocomplete/json?type=geocode&language=en&key=API_KEY&input=c' from origin 'https://angular.babelonia.nl' 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.

Also I couldn't find the above headers in the request header. what I am doing wrong?