Flutter web：如何修复 Google API 的 CORS 错误

Question

在 Firebase 托管上托管的 Web Flutter 应用程序中，我尝试进行一些 Google Api 调用。

像这样： https://maps.googleapis.com/maps/api/place/autocomplete/json?input=tre&types=address&key=XXXXXXXXXX&sessiontoken=YYYYYYYYYYYY&language=fr-FR&components=country%3Afr

我已经尝试为 Firebase Hosting 配置 cors，它适用于从 Firebase Storage 下载的图像，但不适用于 Google Api 调用... 例如：access-control-allow-origin is not allowed error，但如果省略，则预期会从 get request Flutter web 我花了几个小时尝试配置。

这是 Flutter 代码：

final Map<String, dynamic> parameters = <String, dynamic>{
  'place_id': placeId,
  'fields': 'address_component,geometry',
  'key': mapsApiKey,
  'sessiontoken': sessionToken
};

final Uri request = Uri(
    scheme: 'https',
    host: 'maps.googleapis.com',
    path: '/maps/api/place/details/json',
    queryParameters: parameters);

final response = await client.get(request);

Answer 1

CORS 错误不会来自 Firebase 托管，而是来自 Google API 本身。 CORS 是一种 浏览器端 安全机制，浏览器会向

fetch()

或

Uri()

发送“预检”（OPTIONS 调用），您的代码会从哪个主机查找调用该 API 的页面是。如果 API（在本例中为

maps.googleapis.com

）不处理 OPTIONS 请求或使用受限列表进行回复，并且进行该 API 调用的页面不是来自这些受限主机之一，则您的浏览器将引发 CORS 异常。