Use modern Fetch API with Dio on Web

[mikuhl-dev]

Request Statement

I am trying to figure out Dio and CORS on web. Google is used here as an example, but it could be anything.

Currently if you were to make a request with Dio to "https://www.google.com/" on web. Your request would fail with a transport error, as the browser blocks the request because Google does not reply with the header that allows the browser to do this.

This is done to prevent websites from sending requests to Google with your current cookies, which could be dangerous.

But what happens if you just want to request the page without cookies? As if you were never logged in at all. It seems that XMLHttpRequest only wants to send cookies, or not send anything at all.

Is this doable with the modern Fetch API? https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
It looks like there are different modes for cors. Possibly one with this effect?

If so than should there be an option to use this modern Fetch API with Dio? Especially when modern Fetch API allows for streaming, which is not possible with XMLHttpRequest.

Solution Brainstorm

No response

[ueman]

In the meantime, you're able to write your own adapter, which makes use of fetch instead of xhr. If you happen to do so, we would appreciate a PR.

If we work on this, we should check for browser compatibility before starting.

[AlexV525]

Regarding the Fetch API, I just found a new plugin that integrates the Fetch API for the http package. https://pub.dev/packages/fetch_client

[AlexV525]

We recently received many requests related to obtaining streams directly on the Web platform. This might have a higher priority to implement as a new Dio instance or adapter.

[AlexV525]

Related:

• Web environment cannot obtain real-time data stream #1795
• Chunked stream reading doesn't work correct ( Dio().get<ResponseBody> Options(responseType: ResponseType.stream)) #1621
• How do we listen to Server Sent Event(SSE) Stream using Dio package #1279

[ueman]

Theoretically, you could wrap the http fetch_client in the ConversionLayerAdapter to enable it easily.

The ConversionLayerAdapter could maybe its own package to allow an easy interopt between http and dio

[Zekfad]

You can directly use fetch_client's underlying fetch_api to get strong typed bindings.

[meetdhanani17]

it is necessary to add in ConversionLayerAdapter or make another layer like that with another name or should we directly add to browser_adapter

[ueman]

@meetdhanani17 I'm not sure, I understand what you're trying to say.

Right now, you can't use the ConversionLayerAdapter outside of the native_dio_adapter, but it could be moved into its own package, to allow an easier interopt between dio and http packages. It should not be moved into dio, since it would add a dependency on http.

[AlexV525]

We may consider pulling this into our implementation: dart-lang/http#1401

[ueman]

FWIW, as long as it's not done within DIO, you can use dio_compatibility_layer with the http package in order to use fetch.

[AlexV525]

FWIW, as long as it's not done within DIO, you can use dio_compatibility_layer with the http package in order to use fetch.

Yeah but we can migrate the implementation to our web adapter.