从 flutter web 访问 google 地图 api 时如何解决 CORS 问题？

Question

我正在使用 Google 地图 API 来实现位置自动完成功能。要从客户端（Flutter Web）获取我使用的位置 https://maps.googleapis.com/maps/api/place/autocomplete/jsontype=geocode&language=de&key=API_KEY&input=puratchi。

打这个API的函数：

Future<List<Prediction>> fetchingAutocomplete(String searchText) async {
  Uri autocompleteUri = Uri.parse(
      "https://maps.googleapis.com/maps/api/place/autocomplete/json?type=geocode&language=${kLanguageCode.value}&key=$kGoogleApiKey&input=$searchText");
  Response response = await GetConnect().get("$autocompleteUri",headers: {"Content-Type": "application/json"});
  if (response.statusCode == 200) {
    return AutocompleteModel.fromJson(response.body).predictions;
  } else {
    return AutocompleteModel.fromJson({}).predictions;
  }
}

我也尝试过这个：

Future<List<Prediction>> fetchingAutocomplete(String searchText) async {
  final client = dio.Dio();
  // Add an interceptor to set headers before each request
  client.interceptors.add(dio.InterceptorsWrapper(
    onRequest: (dio.RequestOptions options, dio.RequestInterceptorHandler handler) {
      options.headers['Access-Control-Allow-Origin'] = 'https://angular.babelonia.nl';
      options.headers['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS';
      options.headers['Access-Control-Allow-Headers'] = 'Content-Type';
      options.headers['Access-Control-Allow-Credentials'] = 'true';
      handler.next(options);
    },
  ));
  Uri autocompleteUri = Uri.parse(
      "https://maps.googleapis.com/maps/api/place/autocomplete/json?type=geocode&language=${kLanguageCode.value}&key=$kGoogleApiKey&input=$searchText");
  dio.Response response = await client.get("$autocompleteUri", options: dio.Options(headers: {"Content-Type": "application/json"}));
  if (response.statusCode == 200) {
    return AutocompleteModel.fromJson(response.data).predictions;
  } else {
    return AutocompleteModel.fromJson({}).predictions;
  }
}

当我在移动应用程序中尝试此操作时，它工作正常。但是当我尝试从 flutter web 中访问它时，它引发了 CORS 问题。我删除了谷歌控制台上的所有限制。还配置了我的 nginx 服务器 CORS 策略。

这是我在服务器端添加的：

location / {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
    add_header 'Access-Control-Allow-Headers' 'Content-Type';
    add_header 'Access-Control-Allow-Credentials' 'true';
}

预检请求没有问题，我可以在请求标头中看到上述标头。但是 FETCH/XHR 失败并抛出以下 CORS 错误。

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/autocomplete/json?type=geocode&language=en&key=API_KEY&input=c' from origin 'https://angular.babelonia.nl' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

另外我在请求标头中找不到上述标头。我做错了什么？

Answer 1

如果您将 firebase 与谷歌云 GOOGLE MAPS SDK javascript 一起使用，则必须执行这些步骤，因为响应不知道您的响应标头：

1- 打开谷歌云控制台。

2-像这样创建一个 cors.json 文件

[
  {
    "origin": ["*"],
    "method": ["GET", "HEAD", "PUT", "POST", "DELETE"],
    "responseHeader": ["Content-Type"],
    "maxAgeSeconds": 3600
  }
]

3-初始化SDK

gcloud init

4- 通过运行安装 gsutil（如果在此过程中尚未安装）：

gcloud components install gsutil

5- 首先，验证您的 Firebase 存储桶名称。您可以在 Firebase 控制台中找到它，通常格式为：your-project-id.appspot.com。

gsutil cors set cors.json gs://your-project-id.appspot.com