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': '*'})