【问题标题】:Flutter Web Http Error : Uncaught (in promise) Error: XMLHttpRequest errorFlutter Web Http 错误:未捕获(承诺)错误:XMLHttpRequest 错误
【发布时间】:2021-03-25 06:17:17
【问题描述】:

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

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

我查看了几篇帖子,但没有发现与我类似的错误。有人说是由于跨域请求 (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!

提前感谢您的帮助

【问题讨论】:

  • 这是一个服务器端错误。您必须将这些标头添加到您的 服务器
  • 我尝试在 php 端添加这个:stackoverflow.com/a/9866124/14824303 和 call ,但它是同样的错误。

标签: flutter http flutter-web


【解决方案1】:

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

简单的方法是:

为了让您的应用程序直接运行到 Chrome(网络),您应该进行大量更改

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

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

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

第一步:导航到flutter的目录,然后进入flutter\bin\cache并删除一个名为:flutter_tools.stamp的文件(以便在必要的更改后重建flutter)

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

第 3 步:在文件中,您必须删除一行 '--disable-extensions'

第 4 步:在同一文件中,恰好在 final List&lt;String&gt; 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 步:享受 Flutter web。

【讨论】:

  • 谢谢你,它成功了。您还想指出这件事的来源吗?
【解决方案2】:

我在 Flutter Web 应用程序中发出 HTTP 请求时遇到了完全相同的问题,唯一的区别是我在 Node.js 中编写了我的服务器。

我知道您之前已经阅读过 CORS,但不要相信这就是问题所在。但是,我真的建议您尝试一次,因为它对我来说就像是一种魅力(现在我想起来了,它在以前使用 Flutter Web 的项目中也起作用 - 烧瓶! )

这是一个您可以开始查看的线程:Cross-Origin Request Headers(CORS) with PHP headers

对于像我这样使用 Node 的人来说,这确实很有帮助:Adding CORS support in Node.js

我真的希望你觉得这对你有帮助

【讨论】:

    【解决方案3】:

    如果您在应用程序中使用 Firebase 并收到此错误,并且经过一个小时的调试后您已经到了这里,并且您也恰好生活在 google 已停止向其提供某些服务的国家/地区(您知道如果您住在其中一个国家/地区),那么您应该只连接到 VPN。

    【讨论】:

      猜你喜欢
      • 2022-01-07
      • 2022-12-19
      • 2021-02-01
      • 2021-03-03
      • 2018-11-16
      • 2020-06-03
      • 2018-10-12
      • 1970-01-01
      • 2019-11-24
      相关资源
      最近更新 更多