Dio error on web app

[mouradkherouf]

As your library is supposed to be web compatible on pub.dev, I'm surprise to have a dio error when I try my app in any browser.
On my mobiles, prediction works fine but on any browser I have this error :

Error: DioError [DioErrorType.response]: XMLHttpRequest error.
Source stack:
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 942:28 get current
packages/dio/src/dio_mixin.dart 488:35 fetch
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5 _async
packages/dio/src/dio_mixin.dart 487:31 fetch
packages/dio/src/dio_mixin.dart 483:12 request
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5 _async
packages/dio/src/dio_mixin.dart 453:33 request
packages/dio/src/dio_mixin.dart 61:12 get
packages/google_places_flutter/google_places_flutter.dart 87:34 getLocation
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5 _async
packages/google_places_flutter/google_places_flutter.dart 66:14 getLocation
packages/google_places_flutter/google_places_flutter.dart 120:5 textChanged
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5 _async
packages/google_places_flutter/google_places_flutter.dart 119:14 textChanged
dart-sdk/lib/async/zone.dart 1594:10 runUnaryGuarded
dart-sdk/lib/async/stream_impl.dart 339:11 [_sendData]
dart-sdk/lib/async/stream_impl.dart 271:7 [_add]
dart-sdk/lib/async/stream_impl.dart 1044:46 addSync
packages/rxdart/src/utils/forwarding_stream.dart 130:35 add
packages/rxdart/src/transformers/backpressure/backpressure.dart 214:13 resolveWindowEnd
packages/rxdart/src/transformers/backpressure/backpressure.dart 155:27
dart-sdk/lib/async/zone.dart 1582:10 runGuarded
dart-sdk/lib/async/stream_impl.dart 392:13 sendDone
dart-sdk/lib/async/stream_impl.dart 402:7 [_sendDone]
dart-sdk/lib/async/stream_impl.dart 291:7 [_close]
dart-sdk/lib/async/stream_pipe.dart 311:13 [_handleData]
dart-sdk/lib/async/stream_pipe.dart 153:13 [_handleData]
dart-sdk/lib/async/zone.dart 1594:10 runUnaryGuarded
dart-sdk/lib/async/stream_impl.dart 339:11 [_sendData]
dart-sdk/lib/async/stream_impl.dart 271:7 [_add]
dart-sdk/lib/async/stream_controller.dart 784:19 [_sendData]
dart-sdk/lib/async/stream_controller.dart 658:7 [_add]
dart-sdk/lib/async/stream_controller.dart 606:5 add
packages/rxdart/src/streams/timer.dart 51:22
dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19 internalCallback

dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 294:49 throw
packages/dio/src/dio_mixin.dart 643:7
dart-sdk/lib/async/zone.dart 1666:54 runBinary
dart-sdk/lib/async/future_impl.dart 168:22 handleError
dart-sdk/lib/async/future_impl.dart 849:46 handleError
dart-sdk/lib/async/future_impl.dart 870:13 _propagateToListeners
dart-sdk/lib/async/future_impl.dart 646:5 [_completeError]
dart-sdk/lib/async/future_impl.dart 57:12 [_completeError]
dart-sdk/lib/async/future_impl.dart 24:5 completeError
dart-sdk/lib/async/future.dart 620:44 onError
dart-sdk/lib/async/zone.dart 1666:54 runBinary
dart-sdk/lib/async/future_impl.dart 168:22 handleError
dart-sdk/lib/async/future_impl.dart 849:46 handleError
dart-sdk/lib/async/future_impl.dart 870:13 _propagateToListeners
dart-sdk/lib/async/future_impl.dart 646:5 [_completeError]
dart-sdk/lib/async/future_impl.dart 736:7 callback
dart-sdk/lib/async/schedule_microtask.dart 40:11 _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5 _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:15

Any idea ?
Thanks

[patrisor]

@mouradkherouf, the issue you encountered is related to Cross-Origin Resource Sharing (CORS). CORS is a security feature implemented by web browsers to prevent unauthorized access to resources from a different origin. In this context, the CORS issue arises when the library attempts to make HTTP requests to the Google Places API from the client web app.

To overcome the CORS restrictions and enable successful API requests, a common workaround is to use a proxy server that is configured to handle CORS requests and forwards them to the Google Places API. The proxy server acts as an intermediary, adding the necessary CORS headers to the requests, allowing them to pass through the browser's security measures.

With help from this forum, here is the solution I came up with:

• cd into the “google_places_flutter-2.0.5/” project directory.
• You can find the location of this project directory by going into your “.flutter-plugins” file, and making note of the flutter plugins directory.
• In my case, my full “google_places_flutter-2.0.5/” directory location was “~/.pub-cache/hosted/pub.dev/google_places_flutter-2.0.5/”.
• Afterwards, cd in the “lib/” directory.
• Create a duplicate of the “google_places_flutter.dart” file with this command, cp google_places_flutter.dart google_places_flutter.dart.duplicate, because you are going to need to edit some lines.
• Add edits to the “google_places_flutter.dart” file:
• Add import 'package:flutter/foundation.dart' show kIsWeb; to the top of the file.
• In the getLocation() method, replace this line, String url = "https://maps.googleapis.com/maps/api/place/autocomplete/json?input=$text&key=${widget.googleAPIKey}";, with /// Construct the URL for making a Google Places API autocomplete request String apiURL = "https://maps.googleapis.com/maps/api/place/autocomplete/json?input=$text&key=${widget.googleAPIKey}"; String proxyURL = "https://cors-anywhere.herokuapp.com/"; String url = kIsWeb ? proxyURL + apiURL : apiURL; /// Add the custom header to the options final options = kIsWeb ? Options(headers: { "x-requested-with": "XMLHttpRequest" }) : null;.
• In the getLocation() method, replace this line, Response response = await dio.get(url);, with /// Send an HTTP GET request to the specified URL Response response = await dio.get(url, options: options);.
• In the getPlaceDetailsFromPlaceId() method, replace this line, var url = "https://maps.googleapis.com/maps/api/place/details/json?placeid=${prediction.placeId}&key=${widget.googleAPIKey}"; Response response = await Dio().get(url);, with /// Construct the URL for making a Google Places API autocomplete request String apiURL = "https://maps.googleapis.com/maps/api/place/details/json?placeid=${prediction.placeId}&key=${widget.googleAPIKey}"; String proxyURL = "https://cors-anywhere.herokuapp.com/"; String url = kIsWeb ? proxyURL + apiURL : apiURL; /// Add the custom header to the options final options = kIsWeb ? Options(headers: { "x-requested-with": "XMLHttpRequest" }) : null; /// Send an HTTP GET request to the specified URL Response response = await Dio().get(url, options: options); .
• Save the edited “google_places_flutter.dart” file.
• Recompile and run your project with flutter run.

From this example, the proxy server I ended up using was "https://cors-anywhere.herokuapp.com/". I have seen people use different proxy servers, but this is what’s worked for me. If you decide to change the proxy server, you can replace it by changing the proxyURL variable. Here is the full code: google_places_flutter.dart.txt

Hope this helps!

[w113st]

@mouradkherouf which version are you using? maybe fix by @patrisor 587ac00 may actually be causing your error if is blocking your request. it's happening to me so I'm downgrading to google_places_flutter:2.0.7

[Studio1618]

Tanks, I've solve it making my own prediction system in my backend ;-)

[aykutuludag]

Same issue. I wrote my suggestion to fix this error: #7 (comment)