Flutter DIO library XMLHttpRequest error Web

user_8176062 0
Viewed 6367

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?

dio flutter http web-applications xmlhttprequest
2 Answers

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

user_125219640

The error is caused due to the same-origin policy. However, this policy only applies to requests that are made from the client to the server. The solution is to make a function that runs in your server, which will make the request, wait for its completion and return any relevant data. And call that function instead of dio.

I used firebase and solved the issue with a cloud function.

import axios from "axios"; // install by running **npm install axios** inside your functions folder

export const serverRequest = functions.https.onCall(async (url, context)=> {
  const response = await axios.get(url as string).then(({data})=> data);
  return response;
});

The function above is an example for a get request, in your case just change it to a post request, pass the data and the URL as arguments and it should work.

user_142681840
Related