Flutter Web Http Error : Uncaught (in promise) Error: XMLHttpRequest error

Question

I am trying to develop a flutter app that sends an http request to a remote php file hosting on 000webHost.

When I build my Flutter application for Desktop, I manage to retrieve the information, everything is fine. However, due to another problem (video player doesn't work with Desktop....), I want to go back to a web build.

I have looked on several posts, but I did not find an error similar to mine. Some speak of an error due to Cross Origin Request (CORS), but it does not seem to me to be this problem.

When I try to retrieve my data with a http.post I have the following errors:

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

My Code :

 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');
    }
  }

When I use flutter doctor :

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!

Thank you in advance for your help

Solution 1

Okay, just fixed this bug temporarily. There are several steps must be followed in order to allow cors from Chrome(web)

The easy way is:

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

• run the application on the Web server(web)

In order you want to run your application directly to Chrome(web) you should make a lot of changes.

To be more specific, you would see that the chrome browser that the application runs, It isn't your real-syncronized chrome, It is just a mirror of a simple empty chrome browser.

• add the extension I mention before in the empty chrome, If it works, don't touch it.

If the empty browser doesn't allow you to add extension

Step 1: navigate to flutter's directory and then go flutter\bin\cache and remove a file named: flutter_tools.stamp(in order to rebuild flutter after the necessary changes)

Step 2: navigate to flutter\packages\flutter_tools\lib\src\web and open the file chrome.dart.

Step 3: Inside the file, you must remove a line '--disable-extensions'

Step 4: Inside the same file and exactly before the final List<String> args specification, you should add this final directory = 'C:\Users\{user_name}\{create_a_new_folder_and_add_here_its_name}'; and change this line '--user-data-dir=${userDataDir.path}' to this '--user-data-dir=$directory' if you don't apply these changes, you will need to add the extension every time you run your code 'cause it wouldn't be saved.

Step 5: Save the file and rerun your code.

Step 6: When the browser opens, It will allow you to apply any extension you want.

Step 7: Add the extension now.

Step 8: Enjoy flutter web.

Solution 2

I encountered the exact same issue while making HTTP requests in my Flutter Web application, the only difference being that I've coded my server in Node.js.

I know you've read about CORS previously but don't beleive that's the issue. However I'd really recommend that you try it once, because it has worked like a charm for me (and now that I think about it, it worked on a previous project using Flutter Web - flask too!)

Here is a thread that you could start looking at: Cross-Origin Request Headers(CORS) with PHP headers

For others like me, using Node, this truly helped:Adding CORS support in Node.js

I really hope you find this helpful

Comments

[nimi0112]

Thank you man, it worked. Would you also like to point out the source to this ?

[Prodromos Sarakinou]

Hi, glad to here it, I didn't find a single source for this solution. I searched a lot of things, then I took a look in flutter's source code and finally solved it.