Can't fetch places from Google Places API in Flutter web

Question

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/autocomplete/json?input=ahme&key=$API_Key&sessiontoken=$sessionToken' from origin url 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

already added headers

final response = await dio.get(placesApiUrl,
      options: Options(headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Credentials': true
      }));
  responseJson = response.data;

I expected google place picker must be working in flutter web

Answer 1

The error message you provided indicates that the Google Places API server is not including the necessary headers in its response to allow your web application to make requests from a different domain.

However, CORS headers are not something you can control from the client side (your Flutter web application) – they need to be set on the server side (Google's servers in this case). Google's servers need to explicitly allow requests from your domain by including the appropriate CORS headers in their responses.

The solution is not to modify the headers on your client-side request, as it won't affect how Google's API responds. Instead, you need to work within the constraints of the Google Places API and its CORS policy.