The error i got when using Google places api. The package im using is flutter_google_places.
The code works on Android but when i use it on web (Chrome), i got error
Future<Prediction?> searchLocation()async{
print('print start ');
try{
Prediction? p = await PlacesAutocomplete.show(
onError: (value) {
print('this is the value of error ${value.errorMessage}');
Fluttertoast.showToast(msg: '${value.errorMessage}');
},
offset: 0,
radius: 10000,
types: [],
strictbounds: false,
context: context,
apiKey: kApiKey,
// httpClient:,
proxyBaseUrl: kIsWeb?'https://cors-anywhere.herokuapp.com/':null,
mode: Mode.overlay, // Mode.fullscreen
language: "en",
components: [Component(Component.country, "pk")]
);
print('print perdiction ${p.toString()}');
return p;
}catch(error){
print('This is the catch error: $error');
return null;
}
}
The error i got on the terminal :
Error: ormatException: SyntaxError: Unexpected token ‘T’, "This API
e"… is not valid JSON
dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart
294:49 throw
dart-sdk/lib/_internal/js_dev_runtime/patch/convert_patch.dart 39:5
_parseJson dart-sdk/lib/convert/json.dart 610:36
convert dart-sdk/lib/convert/json.dart 216:41
decode packages/google_maps_webservice/src/places.dart 531:48
[_decodeAutocompleteResponse] packages/google_maps_webservice/src/places.dart 171:12
autocomplete
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50
<fn> dart-sdk/lib/async/zone.dart 1661:54
runUnary dart-sdk/lib/async/future_impl.dart 156:18
handleValue dart-sdk/lib/async/future_impl.dart 840:44
handleValueCallback dart-sdk/lib/async/future_impl.dart 869:13
_propagateToListeners dart-sdk/lib/async/future_impl.dart 641:5
[_completeWithValue] dart-sdk/lib/async/future_impl.dart 715: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
<fn>
2
Answers
After lot of research and working on it, I finally got the solution. The problem is when i use proxyBaseUrl the respond i got form the api is no in correct forment, Now just comment the proxyBaseUrl:
After this, you got the error on terminal like this:
Error: XMLHttpRequest
This error is a Javascript error and it can be inspected from AndroidStudio terminal or from the browser console. If you run into this problem it means that the requests to the API server are failing due to a CORS error.
Now to solve this error go to flutter directory on you pc:
In my case : {C:srcflutterbincache}
Delete this file:
Now go to this directory {C:srcflutterpackagesflutter_toolslibsrcweb}
Open this file in any Editor :
Search and Comment this '--disable-extensions' in chrome.dart file
and add this '--disable-web-security', just like this:
Now all the errors are successfully removed :)