Troubleshooting Dart XMLHttpRequest error - works for Flutter mobile, not for Flutter web

Question

我对 Dart 还很陌生，并且很难解决这个出现在很多问题中的错误：

Error: XMLHttpRequest error.

My real-life scenario is a Flutter web app that's supposed to hit a Google Cloud Function, but in the spirit of MWEs I've replicated the issue with this Dart:

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

Future<void> main() async {
  final response = await http.post(
    Uri.https(
        //'jsonplaceholder.typicode.com', 'albums'),
        'my-region-my-project.cloudfunctions.net',
        '/remainingTrigger'),
    headers: <String, String>{
      //'Content-Type': 'application/json; '
      //    'charset=UTF-8',
      'Content-Type': 'application/json'
    },
    body: jsonEncode(<String, String>{
      //'title': 'test',
      'ingredients': 'test',
    }),
  );
  log('response was ${response.body}');
}

headers评论似乎没有任何区别，但如果我翻转其他评论，它适用于 JSONPlaceholder。 如果我在终端中使用curl我的云 Function

$ curl -X POST -H "Content-Type: application/json" -d '{"ingredients": "test"}' https://my-region-my-project.cloudfunctions.net/remainingTrigger
{"key":"value","otherKey":"otherValue"}

它工作正常。 我最初确实遇到了 CORS 的问题（我的 Cloud Function 日志显示 417）但在我添加之后

from flask import abort
def entryPoint(request):
    if request.method == 'OPTIONS':
        headers = {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'POST',
            'Access-Control-Allow-Headers': 'Content-Type',
            'Access-Control-Max-Age': '3600'
        }
        return ('', 204, headers)
...
    headers = {
        'Access-Control-Allow-Origin': '*'
    }
...
        return (expectedOutput, 200)
...
    else:
        return abort(417)

Cloud Function 日志开始显示正常行为（先是 204，然后是 200）。 如果云 Function 说一切都很好，而 Dart 不同意，那是否排除了 CORS 作为罪魁祸首？ 我只处理过一次 CORS，但我将 Cloud Function 设置得非常相似，并且 web 开发人员能够很好地与之交互。

追溯对我来说是希腊语； 是否有人对辨别导致错误的XMLHttpRequest问题的类型有什么建议？

I'm mainly troubleshooting this in Android Studio 4.1.3 (Chrome emulator) running on Windows 10 Home ( http: ^0.13.1 , Dart SDK 2.12.2, Flutter 2.0.4, Android SDK 29.0.2), but also built并将其部署到我的站点一次，该站点遇到了相同的错误（Safari）。 我正在 Big Sur 11.0.1 上的 Docker 容器中部署 Cloud Function（Python 3.8 运行时），但我认为这没有什么不同。

---

更新 1

To my surprise, this works fine when I try my code in Android Studio's Android emulator (Pixel 3, API 30, Android 11.0). It's just the Flutter web attempts that fail (I've now tried with both Chrome and Edge through Android Studio, and Safari in production). 有没有其他人看到这种行为？

更新 2

我也在供应商的 API 中看到了这种行为，因此它并不特定于我的 Google Cloud Function。 Flutter for web 和 JSONPlaceholder API 的组合有什么特别之处吗？

Answer 1

我有同样的问题，它似乎与跨域相关。 它可以通过在云 function 中发送带有响应的 {'Access-Control-Allow-Origin': '*'} 来修复。 响应应如下所示：

return ('Any response body', 200, {'Access-Control-Allow-Origin': '*'})