Flutter_google_places在Web端调用Google Places API报JSON解析错误

代码在Android端可正常运行，但Chrome Web端出现JSON解析错误，报错提示无法解析非JSON格式的响应内容。

相关代码 #

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;
    }
}

终端报错信息 #

Error: FormatException: 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
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

解决方法 #

• 排查CORS代理问题：你使用的https://cors-anywhere.herokuapp.com/公共代理可能已限制访问，返回的是HTML提示文本而非API的JSON响应，导致解析失败。建议替换为自己搭建的CORS代理，或者直接在Google Cloud控制台为Places API配置允许你的Web域名的CORS规则（更稳定）。
• 验证API密钥权限：确保你的Google API密钥已启用Places API，并且在密钥的应用限制中添加了Web端的访问域名（比如开发环境的localhost:xxxx或生产环境域名）。若权限不足，API会返回文本格式的错误信息，而非JSON。
• 调试原始响应：添加自定义HttpClient打印原始响应内容，确认返回的是否为有效JSON：

  httpClient: http.Client()..send = (request) async {
    final response = await http.Client().send(request);
    final body = await response.stream.bytesToString();
    print('Raw API response: $body');
    return response;
  },
  

• 替换公共代理：如果依赖公共代理不稳定，可自行基于cors-anywhere源码部署代理服务，或用Nginx配置反向代理来处理跨域请求。

内容的提问来源于stack exchange，提问作者Muzammil