FormatException: SyntaxError: Unexpected token 'T', "This API e"... is not valid JSON

Question

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>

Answer 1

1. The error says you receive invalid JSON
2. The following piece of code overrides proxy value for web config, that's is your lead, go check what's wrong with that URL/server:

proxyBaseUrl: kIsWeb?'https://cors-anywhere.herokuapp.com/':null,

Answer 2

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:

// proxyBaseUrl: kIsWeb?'https://cors-anywhere.herokuapp.com/':null,

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:\src\flutter\bin\cache}

Delete this file:

Now go to this directory {C:\src\flutter\packages\flutter_tools\lib\src\web}

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 :)