Error: DioError [connection error]: The connection errored: The XMLHttpRequest onError callback was called. This typically indicates an error on the network layer.

[rashedswen]

Package

dio

Version

5.0.0

Output of flutter doctor -v

[✓] Flutter (Channel stable, 3.7.0, on macOS 13.1 22C65 darwin-arm64, locale en-SA)
    • Flutter version 3.7.0 on channel stable at /Users/rashed/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b06b8b2710 (3 weeks ago), 2023-01-23 16:55:55 -0800
    • Engine revision b24591ed32
    • Dart version 2.19.0
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/rashed/Library/Android/sdk
    • Platform android-33, build-tools 33.0.1
    • Java binary at: /opt/homebrew/Cellar/openjdk/19/libexec/openjdk.jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment Homebrew (build 19)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio
    • Android Studio at /Users/rashed/Desktop/Android Studio Preview.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] IntelliJ IDEA Community Edition (version 2022.2.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.75.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.58.0

[✓] Connected device (4 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554                        • android-arm64  • Android 13 (API 33) (emulator)
    • iPhone 14 Pro Max (mobile)  • 7C1C3E84-A12D-4C71-8989-8DC69D255C7F • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-2 (simulator)
    • macOS (desktop)             • macos                                • darwin-arm64   • macOS 13.1 22C65 darwin-arm64
    • Chrome (web)                • chrome                               • web-javascript • Google Chrome 110.0.5481.100

[✓] HTTP Host Availability
    • All required HTTP hosts are available

Dart Version

2.19.0

Steps to Reproduce

when I try to call twitter api when using flutter for web with this code

final dioObject = dio.Dio();
await dioObject.post("https://api.twitter.com/oauth/request_token");

I see people talk about enabling CORS but I use twitter api so I haven't access to server side how I can solve this ?

Expected Result

response with token

Actual Result

Error: DioError [connection error]: The connection errored: The XMLHttpRequest onError callback was called. This typically indicates an error on the network layer.
dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49 throw
packages/dio/src/dio_mixin.dart 530:7
dart-sdk/lib/async/zone.dart 1665:54 runBinary
dart-sdk/lib/async/future_impl.dart 162:22 handleError
dart-sdk/lib/async/future_impl.dart 779:46 handleError
dart-sdk/lib/async/future_impl.dart 800:13 _propagateToListeners
dart-sdk/lib/async/future_impl.dart 575:5 [_completeError]
dart-sdk/lib/async/future_impl.dart 51:12 [_completeError]
dart-sdk/lib/async/future_impl.dart 23:5 completeError
dart-sdk/lib/async/future.dart 617:44 onError
dart-sdk/lib/async/zone.dart 1665:54 runBinary
dart-sdk/lib/async/future_impl.dart 162:22 handleError
dart-sdk/lib/async/future_impl.dart 779:46 handleError
dart-sdk/lib/async/future_impl.dart 800:13 _propagateToListeners
dart-sdk/lib/async/future_impl.dart 575:5 [_completeError]
dart-sdk/lib/async/future_impl.dart 666:7 callback
dart-sdk/lib/async/schedule_microtask.dart 40:11 _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5 _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15

[ueman]

CORS can't be fixed on the client side. Please make sure that your request is correct, i.e. all headers are correct, the correct HTTP method is used and that the url is correct.

As of right now, the issue is not actionable. I'm going to close the issue because of that and your indication that it might be CORS.

Feel free to reopen the issue, if you still think it's a dio issue.
But in that case, please provide a more complete example which reproduces the issue.

[Xrok]

I was on the same error.
Got it solved when all the headers sent in the request are allowed by the pre-flight. Check the Access-Control-Allow-Headers header in the pre-flight OPTIONS call, there must be included all the headers you are sending in the request.

[hadi7khan]

I was on the same error. Got it solved when all the headers sent in the request are allowed by the pre-flight. Check the Access-Control-Allow-Headers header in the pre-flight OPTIONS call, there must be included all the headers you are sending in the request.

I am having same issue. How to fix it i have dio interceptor where i tried to add cors headers as well.

@OverRide
void onRequest(
RequestOptions options, RequestInterceptorHandler handler) async {
options.headers['Authorization'] = 'Bearer ' + token;
options.headers['Access-Control-Allow-Origin'] = '*';
log("Request[${options.method}] => PATH: ${options.path}");
super.onRequest(options, handler);
}

can you share your code snippets

[Xrok]

Is this code at your client or server ??
This headers must be set on your server and send to your browser client.
If you are using the Authorization header make sure to allow them
Access-Control-Allow-Headers: Content-Type,Authorization,...

[quemuel]

This video tutorial below worked for me.
https://www.youtube.com/watch?v=GtgJyYFGvPQ

After that it is important to clean, run these commands:
flutter clean
flutter pub get

[ahmadhabibshovo]

dio.options.headers['Demo-Header'] =
'demo header';

after remove this line code
fixed

[FaizanAhmad127]

Hi, i am having the same issue but I am using a third party API "HitHorizon". I have not control over the backend development. The API works fine on my flutter android and also tested on Postman. The only issue is with Flutter web.

[houssam15]

Hi , the backend api send responses with content type "application/json;" and the dio in flutter can't read the response maybe in the network debug tool the response is fine
this is the code :

`Future ping() async {
try {
// Add a response interceptor
dio.interceptors.add(InterceptorsWrapper(
onRequest: (options, handler) {
options.headers['Access-Control-Allow-Origin'] = '';
options.headers['Accept'] = '';

      return handler.next(options);
    },
    onResponse: (response, handler) {
      // Log the response data
      print('Response Status: ${response.statusCode}');
      print('Response Data: ${response.data}');
      return handler.next(response); // Proceed with the response
    },
    onError: (DioException error, handler) {
      // Handle errors
      print("Error${error}");
  
      return handler.next(error); // Proceed with error handling
    },
  ));

  final response = await dio.get(this.getApiUrl() + "/Ping");
  // Process response
} catch (e) {
  if (e is DioException) {
    // Handle Dio errors
    print("[DioException] ${e}");
  } else {
    // Handle other types of errors
    print(e.toString());
  }
}

}`

and this is the error

I/flutter (31630): [DioException] DioException [unknown]: null I/flutter (31630): Error: Error on line 1, column 18: Invalid media type: expected /[^()<>@,;:"\\/[\]?={} \t\x00-\x1F\x7F]+/. I/flutter (31630): ╷ I/flutter (31630): 1 │ application/json; I/flutter (31630): │ ^ I/flutter (31630): ╵

flutter doctor -v

`[√] Flutter (Channel stable, 3.19.5, on Microsoft Windows [version 10.0.22621.3447], locale en-ZA)
• Flutter version 3.19.5 on channel stable at C:\src\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 300451adae (5 weeks ago), 2024-03-27 21:54:07 -0500
• Engine revision e76c956498
• Dart version 3.3.3
• DevTools version 2.31.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at C:\Users\HP\AppData\Local\Android\Sdk
• Platform android-34, build-tools 34.0.0
• ANDROID_HOME = C:\Users\HP\AppData\Local\Android\Sdk
• ANDROID_SDK_ROOT = C:\Users\HP\AppData\Local\Android\Sdk
• Java binary at: C:\Program Files\Java\jdk-19\bin\java.exe
• Java version Java(TM) SE Runtime Environment (build 19.0.2+7-44)
• All Android licenses accepted.

[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2019 16.11.33)
• Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools
• Visual Studio Build Tools 2019 version 16.11.34407.143
• Windows 10 SDK version 10.0.19041.0

[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).

[√] VS Code (version 1.83.1)
• VS Code at C:\Users\HP\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.86.0

[√] Connected device (4 available)
• CPH1823 (mobile) • FETW4TDUSOMZCAGI • android-arm64 • Android 10 (API 29)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [version 10.0.22621.3447]
• Chrome (web) • chrome • web-javascript • Google Chrome 124.0.6367.91
• Edge (web) • edge • web-javascript • Microsoft Edge 124.0.2478.67

[√] Network resources
• All expected network resources are available.

! Doctor found issues in 1 category.`

this is the response details in flutter devtool network tab