Flutter Web getting 'XMLHttpRequest' error while making http call

Question

I am trying to query Apache drill running in my local server but i'm getting the below error. Please help me, I tried adding '.htaccess' inside my /web folder of the project as well but it did't work.... Thanks!

http
    .post(
  'http://localhost:8047/query.json',
  headers: <String, String>{
    'Content-Type': 'application/json',
    'Access-Control-Allow-Headers':
        'Origin, Content-Type, Cookie, X-CSRF-TOKEN, Accept, Authorization, X-XSRF-TOKEN, Access-Control-Allow-Origin',
    'Access-Control-Expose-Headers': "" 'Authorization, authenticated',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET,POST,OPTIONS,DELETE,PUT',
    'Access-Control-Allow-Credentials': 'true',
  },
  body: jsonEncode(<String, String>{
    'queryType': 'SQL',
    'query':
        'select * from dfs.`C:/Users/drill/data/*.parquet`'
  }),
)
    .then((_response) {
  setState(() {
     response = jsonDecode(_response.body);
  });
}

Error: XMLHttpRequest error.
    C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 264:20      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 1450:54                                              runUnary
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 143:18                                        handleValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 696:44                                        handleValueCallback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 725:32                                        _propagateToListeners
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 519: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 1300: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 37287:58                              <fn>
    at Object.createErrorWithStack (http://localhost:62659/dart_sdk.js:4348:12)
    at Object._rethrow (http://localhost:62659/dart_sdk.js:37892:16)
    at async._AsyncCallbackEntry.new.callback (http://localhost:62659/dart_sdk.js:37886:13)
    at Object._microtaskLoop (http://localhost:62659/dart_sdk.js:37718:13)
    at _startMicrotaskLoop (http://localhost:62659/dart_sdk.js:37724:13)

You need to share your server-side code. This is not an issue with flutter. — Christopher Moore, Aug 27 '20 at 16:28
Hi Chris....I have not written the serve-side code, As i mentioned above I'm send a post request to Apache Drill and I haven't changed anything in the configs. It is my first time working on it as well. — Dark_shadow_side, Aug 27 '20 at 16:39
This is almost certainly a server-side error, so if you don't give some more info, it will be difficult to help. Obtaining a more verbose error from flutter may also be helpful. — Christopher Moore, Aug 27 '20 at 16:46
Hi Chris, I doubt this is server-side error, I tried running the application with server stopped to see the behavior/error, I'm Still receiving the same error without the server running. I have pasted the Detailed Log here : https://pastebin.com/ubcwKWLP — Dark_shadow_side, Aug 27 '20 at 17:00
Running it without the server running proves nothing. A server that doesn't respond would still be an error. — Christopher Moore, Aug 27 '20 at 17:03

Searles · Answer 1 · 2020-09-30T20:24:11.863

5

I currently have the same error message and it is very misleading. It seems to simply indicate that the request fails for whatever reason.

To debug it, use Chrome's DevTools (Ctrl+Shift+C), go to 'Network' and check there. You will almost certainly see that some parts of the request are not what you intended and that the request failed.

EDIT: Maybe it is a CORS-issue, then this great answer might be helpful: No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API

edited Sep 30 '20 at 20:24

answered Sep 30 '20 at 19:00

Searles

1,447
1
11
26

Hi Searles it is the CORS issue and I used a python script as an rest API to communicate with the drill and get back the data and it worked for me. It is not the best solution but it worked for me when testing in local machine – Dark_shadow_side Jan 01 '21 at 18:28

Jay Shenawy · Answer 2 · 2022-05-10T16:29:23.880

2

If the above solutions didn't work , It may be just an issue with the device you are running on (Like my case)

in task manager make sure to quit all chrome processes

then

flutter clean

then

flutter run -d chrome

This fixed the problem for me.

edited May 10 '22 at 16:29

answered Oct 18 '20 at 20:42

Jay Shenawy

953
1
12
22

score 0 · Answer 3 · answered Sep 04 '22 at 10:20

How does the response look like? I had a similar issue and fixed it with this information in the response {'Access-Control-Allow-Origin': '*'}

return ('Any response body', 200, {'Access-Control-Allow-Origin': '*'})

So I also believe that it is a server side issue as well. It may work when the URL is posted in a browser or when using tools like insomnia, but flutter needs this information.

Flutter Web getting 'XMLHttpRequest' error while making http call

3 Answers3