Flutter DIO library XMLHttpRequest error Web

Question

I have working with Flutter DIO Library. Its working fine on my Android App but giving error on Web. Error: DioError [DioErrorType.response]: XMLHttpRequest error.

If I tried same url with http its working fine for Web. My Dio Library code

Dio dio = Dio();
dio.options.method = "POST";
dio.options.headers["Access-Control-Allow-Origin"] = "*";
    dio.options.headers["Access-Control-Allow-Credentials"] = true;
    dio.options.headers["Access-Control-Allow-Headers"] =
        "Origin,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,locale";
    dio.options.headers["Access-Control-Allow-Methods"] =
        "GET, HEAD, POST, OPTIONS";
var response = await dio
        .post('http://45.79.124.182/app_php/PagarGuru_test/requestAdd.php');

Error Logs

C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 908:28   get current
packages/dio/src/dio_mixin.dart 819:20                                                                            assureDioError
packages/dio/src/dio_mixin.dart 678:13                                                                            _dispatchRequest
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 60:31   <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1692:54                                 runBinary
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 175:22                           handleError
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 779:46                           handleError
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 800:13                           _propagateToListeners
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 610:5                            [_completeError]
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 666:7                            callback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/schedule_microtask.dart 40:11                     _microtaskLoop
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/schedule_microtask.dart 49:5                      _startMicrotaskLoop
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15  <fn>
    at Object.throw_ [as throw] (http://localhost:58438/dart_sdk.js:5374:11)
    at http://localhost:58438/packages/dio/src/interceptors/log.dart.lib.js:1390:21
    at _RootZone.runBinary (http://localhost:58438/dart_sdk.js:40508:58)
    at _FutureListener.catchError.handleError (http://localhost:58438/dart_sdk.js:35445:33)
    at handleError (http://localhost:58438/dart_sdk.js:36033:51)
    at Function._propagateToListeners (http://localhost:58438/dart_sdk.js:36059:17)
    at _Future.new.[_completeError] (http://localhost:58438/dart_sdk.js:35905:23)
    at _SyncCompleter.new.[_completeError] (http://localhost:58438/dart_sdk.js:35363:36)
    at _SyncCompleter.new.completeError (http://localhost:58438/dart_sdk.js:35286:29)
    at onError (http://localhost:58438/dart_sdk.js:35131:60)
    at _RootZone.runBinary (http://localhost:58438/dart_sdk.js:40508:58)
    at _FutureListener.then.handleError (http://localhost:58438/dart_sdk.js:35445:33)
    at handleError (http://localhost:58438/dart_sdk.js:36033:51)
    at Function._propagateToListeners (http://localhost:58438/dart_sdk.js:36059:17)
    at _Future.new.[_completeError] (http://localhost:58438/dart_sdk.js:35905:23)
    at async._AsyncCallbackEntry.new.callback (http://localhost:58438/dart_sdk.js:35944:31)
    at Object._microtaskLoop (http://localhost:58438/dart_sdk.js:40808:13)
    at _startMicrotaskLoop (http://localhost:58438/dart_sdk.js:40814:13)
    at http://localhost:58438/dart_sdk.js:36279:9

I tried other forum answer, but its not helpful.

My whole project is based on Dio Library.

What should I do?

Bemock

refer my answer here hope its help to you – Vishnu

with http library its working fine but not working with duo library and headers are already added in request still giving error – Bemock

what was the error – Vishnu

same error log : C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 908:28 get current – Bemock

Answer 1

I was experiencing the same problem. But after a quite research I found a working solution:

1. Go to flutter\bin\cache
2. find a file named flutter_tools.stamp , compress it to zip file or whatever to retain a copy then delete the original one.
3. Go to flutter\packages\flutter_tools\lib\src\web and open chrome.dart file in your editor.
4. Find line '--disable-extension'
5. Comment it out and replace it with --disable-web-security.

HAPPY CODING

if you see this 'You are using an unsupported comment-line flag: --disable-web-security. Stability and security will suffer' on your browser assume it. It only does that on ur local env no need to worry

Linnlinnaeus

This method only works for development. not work on release mood – Aeciospore

thanks for this information, this method works for me, but I want to know that what is the main cause of this problem or why this issue occurs. If you know then please help me – Cryolite

@KrishnanshSinghTomar what did you do. i am facing same issue – Pogrom

@HadiKhan so the problem is related to the CORS, and its occurs when I integrated the Google maps autosearch complete API you just need to follow the same steps or you can use heroku proxy server to resolve this problem or in backend you can create a proxy server to resolve this issue – Cryolite

@KrishnanshSinghTomar by "follow the same steps" do you mean the steps in this answer? As someone said that won't work in release mode. – Dagmar

How do you fix this in backend? If it is CORS related should one change some headers in backend? I don't want to use a heroku proxy, our backend is on nginx. What should I do, maybe in nginx config files? – Picked

It didn't help? – Castiglione

This didn't work for me. – Marilee

That worked for me, thanks :) – Clive

@Dagmar by "follow the same steps" I mean to say the solution given above 1. Go to flutter\bin\cache 2. find a file named flutter_tools.stamp , compress it to zip file or whatever to retain a copy then delete the original one. 3. Go to flutter\packages\flutter_tools\lib\src\web and open chrome.dart file in your editor. 4. Find line '--disable-extension' 5. Comment it out and replace it with --disable-web-security. – Cryolite

Answer 2

For those people who still have this issue, I think the easiest way is to add the following URL before your base URL:

const String proxyUrl = 'https://cors-anywhere.herokuapp.com/';
const String baseUrl = proxyUrl + "BASE_URL.com";

And it works in any programming language, and it works in debug and release mode.

Ostracoderm

Answer 3

You can also use Flutter cors package, it is easier than trying to do all the steps

use this dart pub global activate flutter_cors in terminal and then fluttercors --disable to disable cors.

Ssr

Answer 4

I have same problem. I found it is because cors.

I solve it in my dev enviroment by use flutter run -d chrome --web-browser-flag "--disable-web-security"

according to How to solve flutter web api cors error only with dart code?

In prod enviroment, it can be solve by use nginx

Quijano