Flutter web - simple request causing OPTIONS request

[DonRubiczek]

Package

dio

Version

5.4.1

Operating-System

Web

Output of flutter doctor -v

Flutter (Channel stable, 3.19.2, on macOS 14.0 23A344 darwin-arm64, locale
    en-GB)
    • Flutter version 3.19.2 on channel stable at /Users/kuba/Library/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7482962148 (6 days ago), 2024-02-27 16:51:22 -0500
    • Engine revision 04817c99c9
    • Dart version 3.3.0
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/kuba/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A240d
    • CocoaPods version 1.13.0

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

[✓] Android Studio (version 2022.3)
    • Android Studio at /Applications/Android Studio.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
    • Java version OpenJDK Runtime Environment (build
      17.0.6+0-17.0.6b829.9-10027231)

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 14.0 23A344 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 122.0.6261.94

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

Dart Version

3.3.0

Steps to Reproduce

final response = await _client.post<String>(
      'signWithFile',
      data: dio.FormData.fromMap({
        'resultmode': 'form',
        'destParams': 'brak',
        'language': 'pl',
        'identifier': 'de5fb84d-23b4-4e07-bb1e-cc7c0fcf1a9f',
        'needStamp': true,
        'stampPosVertical': stampPosVertical,
        'stampPosHorizontal': stampPosHorizontal,
        'name': fileName,
        'file': dio.MultipartFile.fromBytes(content),
      }),
    );

I am trying to send Simple multipart request as above example. When I am doing it using http package on server side I am receiving this request, but when I am using dio, before getting normal POST request I am getting OPTIONS request even though my request meets all requirements to be simple. At some point DIO is modifying headers or something else which cause sending OPTIONS request.

the same issue, i dont know why is was closed #1601

Expected Result

1. Make simple request - POST to server using dio package.
2. Receive request type POST - everything works fine.

Actual Result

1.Make simple request - POST to server using dio.
2. Receive OPTIONS request instead of POST even though it was simple request and after that receive actual post.

[Alex Li]

Could share a corresponding example which it can works as a simple request with other libraries?

[DonRubiczek]

Above example of multipart request should and is working as simple in different libraries eg. http. You can replace stampPosVertical, stampPosHorizontal with any string and remove file property. Also in this thread #1601 there are written rules for simple request.

[Alex Li]

As "Simple requests" defines:

If the request is made using an XMLHttpRequest object, no event listeners are registered on the object returned by the XMLHttpRequest.upload property used in the request; that is, given an XMLHttpRequest instance xhr, no code has called xhr.upload.addEventListener() to add an event listener to monitor the upload.

The code here gives a detailed explanation:

dio/dio/lib/src/adapters/browser_adapter.dart

Lines 106 to 114 in ccc7666

 // This code is structured to call `xhr.upload.onProgress.listen` only when 
 // absolutely necessary, because registering an xhr upload listener prevents 
 // the request from being classified as a "simple request" by the CORS spec. 
 // Reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests 
 // Upload progress events only get triggered if the request body exists, 
 // so we can check it beforehand. 
 if (requestStream != null) { 
   if (connectTimeoutTimer != null) { 
     xhr.upload.onProgress.listen((event) { 

[Alex Li]

So the way to avoid getting CORS is not using the connectTimeout/sendTimeout/onSendProgress on the Web platform, it also means little on the Web platform.