Question 337922 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter web : How to fix CORS Error fo Google Apis

In web Flutter app hosted on Firebase Hosting, I try to make some Google Api calls.

Like this :
https://maps.googleapis.com/maps/api/place/autocomplete/json?input=tre&types=address&key=XXXXXXXXXX&sessiontoken=YYYYYYYYYYYYY&language=fr-FR&components=country%3Afr

I already try to configure cors for Firebase Hosting, it works for images downloaded from Firebase Storage, but do not works for Google Api calls…
Like : access-control-allow-origin is not allowed error , but if omitted then is expected from get request Flutter web
I spent hours to try configuration.

Here is Flutter code :

final Map<String, dynamic> parameters = <String, dynamic>{
  'place_id': placeId,
  'fields': 'address_component,geometry',
  'key': mapsApiKey,
  'sessiontoken': sessionToken
};

final Uri request = Uri(
    scheme: 'https',
    host: 'maps.googleapis.com',
    path: '/maps/api/place/details/json',
    queryParameters: parameters);

final response = await client.get(request);
Tags:

2

Answers


  1. 0

    CORS errors would not be coming from Firebase Hosting, but from the Google APIs themselves. CORS is a browser side safety mechanism, where the browser sends a "preflight" (an OPTIONS call) to the fetch() or Uri() URL that your code is about to call to find out from which hosts a page calling that API should be. If the API (in this case, maps.googleapis.com) does not handle the OPTIONS request or replies with a restricted list, then your browser throws a CORS exception if the page making that API call is not coming from one of those restricted hosts.

    Login or Signup to reply.
  2. 0

    The most simple way to solve CORS error is to add the following code in you
    project_root/web/index.html

    <script type="text/javascript">
    window.flutterWebRenderer = "html";
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search