提问者:小点点

Flutter Web Http错误:未捕获(promise中)错误:XMLHttpRequest错误


我试图开发一个flutter应用程序,发送超文本传输协议请求到远程PHP文件托管在000webHost。

当我为桌面构建我的Flutter应用程序时,我设法检索信息,一切都很好。但是,由于另一个问题(视频播放器不适用于桌面……),我想回到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医生:

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!

提前谢谢你的帮助


共3个答案

匿名用户

好的,只是暂时修复了这个bug。为了允许来自Chrome的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的文件(以便在必要的更改后重建flutter)

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

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

    第4步:在同一个文件中,正好在最终列表之前

    第5步:保存文件并重新运行代码。

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

    第7步:立即添加扩展程序。

    第8步:享受flutter web。

  • 匿名用户

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

    我知道你以前读过CORS,但不要相信这是问题所在。然而,我真的建议你尝试一次,因为它对我来说就像一种魅力(现在我想起来了,它也适用于以前使用Flutter Web-flask的项目!)

    下面是一个可以开始查看的线程:具有PHP头的跨域请求头(CORS)

    对于像我这样使用Node的人来说,这真的很有帮助:在Node. js中添加CORS支持

    我真心希望你觉得这有帮助

    匿名用户

    CORS问题解决方案1-转到flutter\bin\cache并删除一个名为:flutter tools的文件。戳2-转到flutter\包\flutter tools\lib\src\web并打开文件chrome. dart。3-查找'--disable-扩展'4-添加'--disable-web-security'