cors - 使用 Google Places API(firebase 托管)的 Flutter-Web 出现 XMLHttpRequest 错误

Question

在我的 Flutter-Web 应用程序中，我试图使用 flutter_google_places 包获取地址。我正在尝试使用简单的代码来获取自动完成地址字段(MyTextField 只是一个自定义的文本字段):

final addressField = MyTextField(
  controller: _addressController,
  labelText: 'Indirizzo',
  readOnly: true,
  onTap: () async {
    await PlacesAutocomplete.show(
      context: context,
      apiKey: kGoogleApiKey,
      mode: Mode.overlay,
      onError: (error){print('ERROR: $error');},
    );
  },
);

当我运行应用程序并向该字段插入一些内容时，我没有得到任何结果。但是我收到此错误(从主机上的检查控制台捕获，并且我在本地也收到相同的错误):

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/autocomplete/json?input=h&key=**MY-API-KEY**' from origin 'https://**MY-HOSTING**.firebaseapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我读到这是一个服务器端问题，我尝试像这样修改 firebase.json:

{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [ {
      "source" : "**",
      "headers" : [ {
        "key" : "Access-Control-Allow-Origin",
        "value" : "*"
      } ]
    }]
  }
}

部署了，但也得到了同样的错误。

任何有关解决(本地和托管)的提示表示赞赏。

Answer 1

我在这个 github 评论中找到了一个可以让你继续使用 PlacesAutocomplete 的解决方案:
https://github.com/lejard-h/google_maps_webservice/issues/70#issuecomment-636919093

GoogleMapsPlaces(
  apiKey: 'YOUR_API_KEY',
  baseUrl: kIsWeb
      ? 'https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api'
      : null,
);

另一个 StackOverflow 答案讨论了该解决方案的工作原理，并提供了有关 cors-anywhere 的更多信息(包括如何托管您自己的):
https://stackoverflow.com/a/43881141/3001277