When using Dio in a web environment, there needs to be a way to disable Dio’s automatic cookie setting

[momadvisor]

Request Statement

I encountered the following error:

DioException [connection error]: The connection errored: The XMLHttpRequest onError callback was called. This typically indicates an error on the network layer. This indicates an error which most likely cannot be solved by the library.

This occurs only in web environment. After researching and analyzing, I realized that it was a CORS issue. The URL I’m requesting is api.xxx.com (with the subdomain api.). This URL doesn’t require any cookies and also doesn’t set any set-cookie headers. However, If Chrome has cookies for xxx.com (the root domain) stored locally, It seems that Dio client sets cookies even for requests to api.xxx.com, which results to CORS errors.

Solution Attempt 1 (Success): I resolved the issue by using the package:http/http.dart library instead of Dio library.

Limitation of Attempt 1: The challenge remains in unifying the HTTP client across different environments (http library for web and dio library for non-web).

Attempt 2 (Failure): I tried using a Dio interceptor to set cookies to an empty string:

client.interceptors.add(InterceptorsWrapper(
        onRequest: (options, handler) async {
        options.headers['cookie'] = '';
        return handler.next(options);
    },
));

but it failed with same debug messages.

How to handle this situation?

Solution Brainstorm

No response

[AlexV525]

https://pub.dev/documentation/dio/latest/browser/BrowserHttpClientAdapter/withCredentials.html

[momadvisor]

https://pub.dev/documentation/dio/latest/browser/BrowserHttpClientAdapter/withCredentials.html

Thanks. But Its default value is false. And even when I set it false, It occurs an same error. I think the 'Origin' header should not exist.

dioClient.options.extra['withCredentials'] = false;

This is an error message on the chrome console.
Access to XMLHttpRequest at 'https://api.xxx.com/' from origin 'http://localhost:10545' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[AlexV525]

Then it should not related to Cookies. The request itself might considered CORS.

[momadvisor]

I wonder why It can be resolved just by replacing dio client with http library? Maybe, doesn't http library set the Origin header?(Maybe, in contrast, dio client sets the Origin header)

[momadvisor]

Yea. you're right. After more debugging, I found the problem was not related to cookies, but to header fields. But until now, I couldn't find exactly and specifically which is a problem and how to solve it

[AlexV525]

Maybe #2125 (comment)

[momadvisor]

After removing 'contentType' property, It is solved.

dio: 5.4.2+1
flutter: 3.19.2
chrome: 124.0.6367.61 (windows 10)

BEFORE

final client = Dio(
    BaseOptions(
      baseUrl: 'https://api.xxx.com/',
      connectTimeout: const Duration(seconds: 5),
      receiveTimeout: const Duration(seconds: 10),
      headers: {
        HttpHeaders.userAgentHeader: ua,
      },
      contentType: Headers.jsonContentType,
      responseType: ResponseType.json,
    ),
  );

AFTER

final client = Dio(
    BaseOptions(
      baseUrl: 'https://api.xxx.com/',
      connectTimeout: const Duration(seconds: 5),
      receiveTimeout: const Duration(seconds: 10),
      headers: {
        HttpHeaders.userAgentHeader: ua,
      },
      // remove this property
      //contentType: Headers.jsonContentType,
      responseType: ResponseType.json,
    ),
  );

I wish it can help someone who are under same issues and I also wish this can help you, author, to develop this lovable library. (deeply appreciate your efforts)
Still wonder why and how but anyway It is solved...

[AlexV525]

I wish it can help someone who are under same issues and I also wish this can help you, author, to develop this lovable library. (deeply appreciate your efforts) Still wonder why and how but anyway It is solved...

See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests which defines the list of content-type which could be treated as simple requests.