Flutter Web Http 错误：未捕获（承诺）错误：XMLHttpRequest 错误

Question

我正在尝试开发一个 flutter 应用程序，该应用程序将 http 请求发送到托管在 000webHost 上的远程 php 文件。

当我为桌面构建 Flutter 应用程序时，我设法检索了信息，一切都很好。但是，由于另一个问题（视频播放器不适用于桌面....），我想回到网络构建。

我查看了几个帖子，但没有发现与我类似的错误。有人说由于跨源请求 (CORS) 导致错误，但在我看来这不是这个问题。

当我尝试使用 http.post 检索我的数据时，出现以下错误：

browser_client.dart:87 POST https://<myadresse>.000webhostapp.com/<nameFile>.php net::ERR_HTTP2_PROTOCOL_ERROR

Uncaught (in promise) Error: XMLHttpRequest error.
    C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 906:28  get current packages/http/src/browser_client.dart 84:22                                                                                    <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1446:54                                              runUnary
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 150:18                                        handleValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 703:44                                        handleValueCallback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 732:32                                        _propagateToListeners
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 526:7                                         [_complete]
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream_pipe.dart 61:11                                         _cancelAndValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream.dart 1302:7                                             <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 324:14  _checkAndCall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 329:39  dcall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/html/dart2js/html_dart2js.dart 37312:58                              <fn>

    at Object.createErrorWithStack (errors.dart:249)
    at Object._rethrow (async_patch.dart:200)
    at async._AsyncCallbackEntry.new.callback (zone.dart:1171)
    at Object._microtaskLoop (schedule_microtask.dart:41)
    at _startMicrotaskLoop (schedule_microtask.dart:50)
    at async_patch.dart:166

我的代码：

 void fetchData() async {
    /**Map for instructions with php**/
    var map = Map<String, dynamic>();
    HandlerResponse
        handlerResponse2; //Use to manage errors and parsing of received responses

    map['action'] = Constants.GET_ALL_OPERATIONS;

    try {
      //Retrieving the response with the file containing the accesses to the database
      http.Response responseCall = await http.post(Constants.ROOT,
          body: map, headers: {"Access-Control-Allow-Origin": "*" , "Access-Control-Allow-Credentials": "true"});

      //Definition of the behavior to adopt upon receipt of the response
      handlerResponse2 = HandlerResponse(parseReponse: parseResponse);

      //Recovery of response processing
      _operations =
          handlerResponse2.response(responseCall); //response(responseCall);

     
     //Notify the change to widgets using the provider to update the interface
      notifyListeners();
    } on SocketException {
      throw FetchDataException('No Internet connection');
    }
  }

当我使用颤振医生时：

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel dev, 1.25.0-4.0.pre, on Microsoft Windows [version 10.0.18362.900], locale fr-FR)
[?] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[?] Chrome - develop for the web
[?] Visual Studio - develop for Windows (Visual Studio Community 2019 16.4.5)
[?] Android Studio (version 4.0)
[?] Connected device (3 available)

• No issues found!

预先感谢您的帮助

Answer 1

好的，只是暂时修复了这个错误。必须遵循几个步骤才能允许来自 Chrome(web) 的 cors

简单的方法是：

• 添加https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

• 在 Web 服务器 (web) 上运行应用程序

为了您想直接在 Chrome(web) 上运行您的应用程序，您应该进行大量更改。

更具体地说，您会看到应用程序运行的 chrome 浏览器，它不是您真正同步的 chrome，它只是一个简单的空 chrome 浏览器的镜像。

• 在空的chrome中添加我之前提到的扩展名，如果有效，请不要触摸它。

如果空浏览器不允许您添加扩展程序

第 1 步：导航到 flutter 的目录，然后转到 flutter\bin\cache 并删除名为：flutter_tools.stamp 的文件（以便在必要的更改后重建 flutter）

第 2 步：导航到 flutter\packages\flutter_tools\lib\src\web 并打开文件 chrome.dart。

第 3 步：在文件内部，您必须删除一行'--disable-extensions'

第4步：里面的同一个文件，并完全之前final List<String> args规范，你应该添加这final directory = 'C:\Users\{user_name}\{create_a_new_folder_and_add_here_its_name}';和改变这一行'--user-data-dir=${userDataDir.path}'到这个'--user-data-dir=$directory' 每次运行代码，“因为它不会告发”时间，如果你没有应用这些改变，你将需要添加扩展得救了。

第 5 步：保存文件并重新运行您的代码。

第 6 步：当浏览器打开时，它将允许您应用您想要的任何扩展。

第 7 步：现在添加扩展。

第 8 步：享受颤振网络。