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/ddcruntime/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 https://github.com/Shrutimahajan/Google-AutoComplete-TextField-Flutter/pull/25/commits/587ac0016c589a31245ff32e66f159923ef154c9 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: https://github.com/Shrutimahajan/Google-AutoComplete-TextField-Flutter/issues/7#issuecomment-2198373741