Flutter Web集成Google Places自动补全遇XMLHttpRequest错误求助

你遇到的XMLHttpRequest error并非由headers为null导致（http.get允许headers参数为null），主要原因集中在请求参数错误、Google API配置问题或浏览器CORS策略限制上，以下是具体修复步骤：

1. 修正请求参数的大小写错误 #

Google Places API的密钥参数名是小写的key，你代码中用了大写的Key会导致请求无法被正确识别，修改控制器中的Uri构建代码：

void placeAutoComplete(String query) async {
    Uri uri =
        Uri.https("maps.googleapis.com", "maps/api/place/autocomplete/json", {
      "input": query,
      "key": ApiConstant.cSecretApiKey, // 改为小写的key
    });
    String? response = await NetworkUtils.fetchUrl(uri);
    if (response != null) {
      log(response);
    }
  }

2. 配置Google Cloud控制台的API权限与CORS规则 #

Web环境下的XMLHttpRequest error绝大多数是浏览器CORS策略限制导致，需在Google Cloud控制台完成以下配置：

• 启用Places API：
  进入API和服务 → 库，搜索「Places API」并确保其处于启用状态。
• 配置API密钥的访问限制：
  进入API和服务 → 凭据，找到你的API密钥：
  1. 在「应用限制」中选择「HTTP referrers (网站)」
  2. 添加你的Web应用域名，本地开发可填http://localhost:*/*，生产环境填实际域名如https://your-domain.com/*
• （可选）通过后端代理请求：
  如果CORS问题仍无法解决，可通过自己的后端服务转发请求（后端请求不受浏览器CORS限制），再将结果返回给Flutter Web应用。

3. 增强错误日志排查 #

修改NetworkUtils代码，打印更详细的请求状态与响应信息，便于定位问题：

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

class NetworkUtils {
  static Future<String?> fetchUrl(Uri uri,
      {Map<String, String>? headers}) async {
    try {
      print('uri: ${uri.toString()}');
      final response = await http.get(uri, headers: headers);
      log('status code: ${response.statusCode}');
      log('response body: ${response.body}');
      if (response.statusCode == 200) {
        return response.body;
      } else {
        log('Request failed with status: ${response.statusCode}');
      }
    } catch (e) {
      log('error in network utils: $e');
      log('Error stack trace: ${StackTrace.current}');
    }
    return null;
  }
}

4. 替代方案：使用Google Places Web SDK #

直接使用官方Web SDK可避免CORS问题，步骤如下：

1. 在web/index.html中添加SDK脚本：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

2. 通过dart:js调用JavaScript侧的自动补全功能，或使用第三方封装包简化开发。

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