Flutter Web调用Google Place Autocomplete API返回null，Postman及安卓正常

可能的原因及解决方法 #

1. 跨域资源共享(CORS)限制 #

Flutter Web运行在浏览器环境下，会受到浏览器的CORS策略约束，而Android端、Postman不受此限制。如果Google Cloud控制台没有配置允许你的Web域名访问API，请求会被拦截，最终返回null。

• 解决：登录Google Cloud控制台，找到你的API密钥，在应用限制中选择「HTTP引用(网站)」，添加你的Web应用域名（比如本地测试的http://localhost:5000，生产环境的https://yourdomain.com）。同时确保「Place Autocomplete API」已启用。

2. GetConnect在Web端的适配问题 #

GetConnect库在Web端的响应处理逻辑可能和移动端存在差异，导致无法正确解析响应体，出现response.body为null的情况。

• 解决：尝试改用Dart原生http包发起请求，示例代码如下：

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<void> fetchingLocationPrediction(String location) async {
  final url = Uri.parse("https://maps.googleapis.com/maps/api/place/autocomplete/json?input=$location&key=$kGoogleApiKey");
  final response = await http.get(url);
  
  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    if (data["status"] == "OK") {
      LocationPredictionModel prediction = LocationPredictionModel.fromJson(data);
      print(data);
      print(response.statusCode);
    } else {
      print("请求状态异常: $location");
      print(data);
      print(response.statusCode);
      print(url.toString());
    }
  } else {
    print("请求失败: $location");
    print(response.body);
    print(response.statusCode);
    print(url.toString());
  }
}

如果改用原生http包后正常，说明是GetConnect的Web端适配问题，可以查看GetConnect文档调整配置，或者直接使用原生http包。

3. API密钥的应用类型限制 #

如果你的API密钥设置了仅允许Android应用调用，Web端的请求会被拒绝，返回null或错误响应。

• 解决：在Google Cloud控制台的API密钥配置页面，检查「应用限制」是否正确设置为Web应用允许的域名，而非仅Android应用。

4. 响应解析异常 #

Flutter Web中，GetConnect可能因为编码或格式问题无法自动将响应解析为JSON对象，导致response.body显示为null。

• 解决：
  • 打印响应的原始字符串：print(response.bodyString)，确认是否有实际的响应数据。
  • 手动解析响应体：使用jsonDecode(response.bodyString)替代直接访问response.body，再进行后续处理。

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